Question

我正在尝试为mat-input做一个自定义验证器。一切正常，在发生错误时显示错误，但在解决错误后，mat-form-field不会删除mat-form-field-invalid类 https://imgur.com/a/MSsaVop

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

The problem is that your CrossFieldErrorMatcher is using the entire form to validate the passwords, when all you really want is for it to look at a subset of that form.

To fix this, simply add a separate FormGroup for the passwords elements so your form building will look like this:

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]]
})

And then in your template, simply 'wrap' your password elements in a div, specifying this new FormGroup as its FormGroup like so:

<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>

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

1 个答案: