javascript - 错误解决后，mat-form-field 不会删除 mat-form-field-invalid 类

Question

我正在尝试为mat-input制作一个自定义验证器。一切正常，错误发生时会显示错误，但解决错误后 mat-form-field 不会删除 mat-form-field-invalid 类 /image/Pewzv.jpg

class CrossFieldErrorMatcher implements ErrorStateMatcher {
    isErrorState(control: FormControl | null, form: FormGroupDirective | 
    NgForm | null): boolean {
        return control.dirty && form.invalid;
   }
}

errorMatcher = new CrossFieldErrorMatcher();
register = this.fb.group({
userName: ['', [Validators.required]],
userEmail: ['', [Validators.required, Validators.email]],
phone: ['', [Validators.required, this.phoneNumberValidator]],
userPassword: ['', [Validators.required]],
passwordconfirm: ['', ],
adminName: ['', [Validators.required]],
adminPassword: ['', [Validators.required]],

}, {
  validator: this.passwordValidator
})

passwordValidator(form: FormGroup) {
    const condition = form.get('passwordconfirm').value !== 
        form.get('userPassword').value;

    return condition ? { passwordsDoNotMatch: true } : null;
}


<mat-form-field class=" my-4 ">
    <input matInput type="password" required 
           formControlName="userPassword" placeholder="Password" 
           [type]="hide ?'password' : 'text'" class="col-4" name="password">    
</mat-form-field>
<mat-form-field class=" my-4 ">
    <input matInput type="password" required 
           formControlName="passwordconfirm" placeholder="Confirm 
Password"
           [type]="hide2 ? 'password' : 'text'" class="col-4"
           [errorStateMatcher]="errorMatcher" name="conpassword">

    <mat-error *ngIf="register.hasError('passwordsDoNotMatch')">
        Passwords do not match!
    </mat-error>
</mat-form-field>

Answer 1

问题在于您的 CrossFieldErrorMatcher 使用整个表单来验证密码，而您真正想要的只是查看该表单的子集。

要解决此问题，只需为密码元素添加一个单独的 FormGroup 即可，这样您的表单构建将如下所示:

register = this.fb.group({
userName: ['', [Validators.required]],
userEmail: ['', [Validators.required, Validators.email]],
phone: ['', [Validators.required, this.phoneNumberValidator]],
// Create a separate FormGroup here to isolate the scope
passwords: this.fb.group({
    userPassword: ['', [Validators.required]],
    passwordconfirm: [''],
}, { validator: this.passwordValidator }),
adminName: ['', [Validators.required]],
adminPassword: ['', [Validators.required]]
})

然后在您的模板中，只需将密码元素“包装”在 div 中，并将这个新的 FormGroup 指定为其 FormGroup ，如下所示:

<div [formGroup]="register.get('passwords')"> // Assign the new FormGroup
    <mat-form-field class=" my-4 ">
        <input matInput type="password" required 
               formControlName="userPassword" placeholder="Password" 
               [type]="hide ?'password' : 'text'" class="col-4" name="password">    
    </mat-form-field>
    <mat-form-field class=" my-4 ">
        <input matInput type="password" required 
               formControlName="passwordconfirm" placeholder="Confirm Password"
               [type]="hide2 ? 'password' : 'text'" class="col-4"
               [errorStateMatcher]="errorMatcher" name="conpassword">

        <mat-error *ngIf="register.get('passwords').hasError('passwordsDoNotMatch')">
            Passwords do not match!
        </mat-error>
    </mat-form-field>
</div>