Question

因此，我已经实现了用于更改密码的自定义表单验证。它工作正常，但是当输入新密码但由于两个不同而尚未触及confirmPassword时，我收到一条错误消息。我想使用validation.dirty并触摸它，以防止出现这种情况，但是按照以下步骤实施，我收到以下错误：

Permission.ReadPhoneState

There is no directive with "exportAs" set to "ngModel" ("mGroup]="password" type="password" class="form-control" id="confirmPassword" name="confirmPassword" [ERROR ->]#confirmPassword="ngModel">

我坚信<form (ngSubmit)="changePassword()" [formGroup]="password"> <div class="form-group"> <label for="oldPassword">Old Password</label> <input type="password" class="form-control" id="oldPassword" name="oldPassword"> </div> <div class="form-group"> <label for="password">New Password</label> <input formControlName="password" [formGroup]="password" type="password" class="form-control" id="password" name="password"> </div> <div class="form-group"> <label for="confirmPassword">Confirm Password</label> <input formControlName="confirmPassword" [formGroup]="password" type="password" class="form-control" id="confirmPassword" name="confirmPassword" #confirmPassword="ngModel"> <div class="alert alert-danger" *ngIf="password.controls.confirmPassword.errors?.MatchPassword && (confirmPassword.touched || confirmPassword.dirty)">Password not match</div> </div> <button type="submit" class="btn btn-primary">Submit</button>将在#confirmPassword="ngModel"上解决此问题，但这就是导致错误的原因。

我在这里做什么错了？

Answer 1

改为使用自定义验证程序

示例：

      ngOnInit() {
        this.myForm = new FormGroup({
          password1: new FormControl(),
         password2: new FormControl('',this.comparePassword.bind(this)),

        })

   comparePassword(control: FormControl): { [key: string]: boolean } {
     if (control.parent){//
    const password1 = control.parent.value['password1'];
    const password2 = control.value;
      if(password1 === password2){
         return {passwordMismatch:true}
         }
     }
    return null;
  }

HTML

<form [formGroup]="myForm">
    <div class="form-group">
       <label for="password1">password1</label>
  <input type="password" 
   class="form-control" formControlName="password1">
    </div>
    <div class="form-group">
       <label for="password2">password2</label>
  <input type="password"  class="form-control" 
  formControlName="password2">
    </div>
 <div *ngIf="myForm.get('password2').errors && myForm?.get('password2')?.errors?.passwordMismatch">
  Password Mismatch
  </div>
</form>

Live Demo

Answer 2

这是使用“ ReactiveForms”方法的working StackBlitz。

您做不到的第一件事就是混合使用不同形式的方法。

如果要使用模型驱动的表单（使用FormsModule），则需要摆脱ReactiveFormsModule伪指令：formControlName，formGroup等。< br /> 另外，您错过了代码中的[(ngModel)]="myValue"，这是#ref="ngModel"正常工作所必需的。

如果要坚持使用ReactiveFormsModule，则需要删除ngModel代码。另外，由于您在父表单上使用formGroup，因此无需在子表单上指定它：

<form [formGroup]="parent>
    <input formControlName="child">
</form>

将此表格绑定到：

parent = new FormGroup({
    child: new FormControl(null),
});

我还随意提出一种验证方法，其中“未来”密码字段包含MinLength和其他验证器，而整个password FormGroup负责确保您的密码匹配。

Angular 2表单验证被触及弄脏并返回错误，无法找出原因

2 个答案: