Angular6形式验证

Question

正在使用angular6文档执行表单验证，就目前而言，我确保所有表单验证都已填写，但现在

以下是我的问题：

1.)如何验证密码和确认密码输入值不少于6个字符，以及密码字段和确认密码字段都必须匹配

2.)如何确保输入的电子邮件地址是有效的？

  <form #r="ngForm" name="theForm" (submit)="reg(r)">
    <div class="form-group">
      <label>Username</label>
      <input type="text"
            class="form-control"
            name="username"
            [(ngModel)]="register.username"
            #registerUsername="ngModel"
            required
            pattern="^[a-zA-Z]+$">
      <span class="help-block danger" *ngIf="registerUsername.errors?.required && registerUsername.touched">
        The username is required
      </span>
      <span class="help-block danger" *ngIf="registerUsername.errors?.pattern && registerUsername.touched">
        The username can only contain the letters a-z or A-Z
      </span>
    </div>





    <div class="form-group">
      <label>Password</label>
      <input type="password"
            class="form-control"
            name="password"
            required
            [(ngModel)]="register.password"
            #registerPassword="ngModel">
      <span class="help-block danger" *ngIf="registerPassword.errors?.required && registerPassword.touched">
        password is required
      </span>
    </div>



 <div class="form-group">
      <label>Confirm Password</label>
      <input type="password"
            class="form-control"
            name="password"
            required
            [(ngModel)]="register.password"
            #registerPassword="ngModel">
      <span class="help-block danger" *ngIf="registerPassword.errors?.required && registerPassword.touched">
        Re-enter password is required
      </span>
    </div>





   <div class="form-group">
      <label>Email</label>
      <input type="email"
            class="form-control"
            name="email"
            required
            [(ngModel)]="register.email"
            #registerEmail="ngModel">
      <span class="help-block danger" *ngIf="registerEmail.errors?.required && registerEmail.touched">
        Email is required
      </span>
    </div>

Answer 1

我试图实现您所述的要求，下面是链接：

https://stackblitz.com/edit/angular-formvalidation-wins999-z1sxcw

我使用了内置的验证器来实现最小长度，并验证了电子邮件。

和一个自定义验证器的密码和确认密码匹配。

这些链接很有用：

https://angular.io/guide/forms-overview

https://material.angular.io/

我希望它能帮上忙

Answer 2

这就是我如何能够解决它，以防它可能帮助别人。

    <div class="form-group">
      <label>Password</label>
      <input type="password"
            class="form-control"
            name="password"
            required  minlength="6"
            [(ngModel)]="register.password"
            #registerPassword="ngModel">
      <span class="help-block danger" *ngIf="registerPassword.errors?.required && registerPassword.touched">
        The password is required
      </span>

 <span *ngIf="registerPassword.errors?.minlength  && registerPassword.touched">
        Password must be at least 6 characters or longer.
      </span>

    </div>



  <div class="form-group">
      <label>Confirm Password</label>
      <input type="password"
            class="form-control"
            name="repassword"
            required  minlength="6"  pattern={{register.password}}
            [(ngModel)]="register.repassword"
            #registerRePassword="ngModel">
      <span class="help-block danger" *ngIf="registerRePassword.errors?.required && registerRePassword.touched">
        Confirm password is required
      </span>

 <span *ngIf="registerRePassword.errors?.minlength  && registerRePassword.touched">
        Password must be at least 6 characters or longer.
      </span>

  <span *ngIf="registerRePassword.errors?.pattern  && registerRePassword.touched">
        Passwords must match.
</span>

    </div>



   <div class="form-group">
      <label>Email</label>
      <input type="email"
            class="form-control"
            name="email"
            required  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"
            [(ngModel)]="register.email"
            #registerEmail="ngModel" email>
      <span class="help-block danger" *ngIf="registerEmail.errors?.required && registerEmail.touched">
        Email is required
      </span>


<span *ngIf="registerEmail.errors?.pattern  && registerEmail.touched">
       Valid Email is required
      </span>

    </div>

Answer 3

试着在角度上使用反应形式，在我看来，它更易读和更灵活。你可以从这里开始。您的表单看起来如下：

​

<div [formGroup]="myForm" #form>
      <label>Username</label>
      <input formControlName="username" type="text">
      <label>Password</label>
      <input formControlName="password" type="password">
      <label>Confirm Password</label>
      <input formControlName="confirmPassword" type="password">
      <label>Email</label>
      <input formControlName="email" type="text">
      <button (click)="submit()" [disabled]="form.invalid">Submit</button>
    </div>

​

而不是像这样在.ts文件中使用FormBuilder构建表单：

​

myForm: FormGroup;
constructor(private builder: FormBuilder) {
  this.myForm = builder.group( {
    username: [null, Validators.required],
    password: [null, [Validators.required, Validators.minLength(6)]],
    confirmPassword: [null, Validators.required],
    email: [null, [Validators.required, Validators.email]]
    }, {validator: PasswordValidator.matchPassword});
   }

​

要验证长度、电子邮件和其他一些可以使用内置验证器的东西，但是为了进行密码匹配，您应该编写更多的代码。我是用分离文件PasswordValidator.ts写的。看上去：

​

export class PasswordValidator {
  static matchPassword(control: AbstractControl) {
    const password = control.get('password').value;
    const confirmPassword = control.get('confirmPassword').value;
    if (password !== confirmPassword) {
      control.get('confirmPassword').setErrors({matchPasswords: true});
    }
    return null;
  }
}

​