Question

我目前具有验证功能，可以验证密码和确认密码是否匹配。如果我不添加updateOn模糊，这似乎很好用，但是当我添加模糊时，它没有命中match函数，导致验证无法正常工作。不确定我在做什么错吗？

这里是检查密码是否匹配的功能

```import { FormGroup } from '@angular/forms';

// custom validator to check that two fields match
export function MustMatch(controlName: string, matchingControlName: string) {
  return (formGroup: FormGroup) => {
    const control = formGroup.controls[controlName];
    const matchingControl = formGroup.controls[matchingControlName];

    if (matchingControl.errors && !matchingControl.errors.mustMatch) {
      // return if another validator has already found an error on the matchingControl
      return;
    }

    // set error on matchingControl if validation fails
    if (control.value !== matchingControl.value) {
      matchingControl.setErrors({ mustMatch: true });
    } else {
      matchingControl.setErrors(null);
    }
  };
}
```

这是HTML

``` <div class="card-block">
      <p class="text-success" *ngIf="success">Your password has successfully been updated, you can now <a [routerLink]="['/login']">login</a> with your new password.</p>
      <p class="text-danger" *ngIf="( resetPasswordForm.invalid && submitted)">Please complete all
            required fields.</p>
      <p class="text-danger" *ngIf="resetPasswordForm.controls['confirmPassword'].errors && resetPasswordForm.controls['confirmPassword'].errors.mustMatch">Passwords must match.</p>
      <ng-container *ngIf="!success">
        <p class="text-danger" *ngFor="let err of errorMessages">{{ err }}</p>
      </ng-container>

      <div class="form-group" [ngClass]="{'has-danger' :submitted &&  resetPasswordForm.controls.password.errors}">
        <label class="form-control-label" for="password">New Password</label>
        <input id="password" type="password" class="form-control" name="password" formControlName="password"
        [ngClass]="{ 'is-invalid': submitted && resetPasswordForm.controls.password.errors}" required>
      </div>

      <div class="form-group" [ngClass]="{'has-danger' :submitted &&  resetPasswordForm.controls.confirmPassword.errors}">
        <label class="form-control-label" for="confirmPassword">Confirm Password</label>
        <input id="confirmPassword" type="password" class="form-control" name="confirmPassword" formControlName="confirmPassword"
        [ngClass]="{ 'is-invalid': (submitted && resetPasswordForm.controls.confirmPassword.errors) ||
                    resetPasswordForm.controls['confirmPassword'].errors && resetPasswordForm.controls['confirmPassword'].error.mustMatch}" required>
      </div>
    </div>

    <div class="card-footer">
      <button type="submit" class="btn btn-primary" >Reset Password</button>
      <small class="text-muted">&nbsp;&nbsp;<a [routerLink]="['/login']">Back to Login</a></small>
    </div>
  </form>
</section>```

这是组件代码

``` private createForm() {
    this.resetPasswordForm = this.fb.group({
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    }, {
        validator: MustMatch('password', 'confirmPassword'), updateOn: 'blur' //  verify that passwords match
      });
   }```

我希望看到错误消息“密码必须匹配”。用户移出确认密码输入框（如果它们不匹配）之后。如果它们匹配，就永远不会看到错误消息

Answer 1

似乎上面的代码可以正常工作，不知道为什么我的东西不能正常工作，但是经过很多更改并恢复到原来的样子

无法获得updateOn'模糊'验证才能正常工作

1 个答案: