如何正确使用带有自定义验证器的 FormControl？ [Angular / Angular Material]

Question

在 FormControl 上使用自定义 Validators 时出现显示问题。我的输入之一是错误的，但没有错误。

这是我的两个FormControl：

FormControl1 = new FormControl({ value: 0, disabled: false }, [Validators.required, Validators.min(0), Validators.max(31), Validators.compose([this.checkError])]);
FormControl2 = new FormControl({ value: 0, disabled: false }, [Validators.required, Validators.min(0), Validators.max(31)]);

FormControl1 有一个不同于 FormControl2 的自定义错误，这里是：

checkError(fieldControl: FormControl): { [s: string]: boolean } {
    console.log(fieldControl);
    if (fieldControl.value === 2) {
        return { error: true }
    } else {
        return { error: false }
    }
}

如果第一个输入的值为2，则出现错误并且可以正常工作。另一方面，当第一个输入的值介于 0 和 31 之间且不等于 2 时，我的输入显示为红色，好像还有错误，这是我不想要的。

我希望 FormControl1 以与 FormControl2 相同的方式工作，后者不显示错误因为它没有自定义 Validators.

HTML代码：

<mat-form-field class="px-3 mb-1">
    <input matInput [formControl]="FormControl1" placeholder="VALUE 1" (blur)="update()" type="number" required>
    <mat-error *ngIf="FormControl1.hasError('required')">FormControl1 *</mat-error>
    <mat-error *ngIf="FormControl1.hasError('min')">FormControl1 > 0</mat-error>
    <mat-error *ngIf="FormControl1.hasError('max')">FormControl1 < 31</mat-error>
    <mat-error *ngIf="FormControl1.hasError('error')">TEST error "2"</mat-error>
</mat-form-field>
<mat-form-field class="px-3 mb-1">
    <input matInput [formControl]="FormControl2" placeholder="VALUE 2" (blur)="update()" type="number" required>
    <mat-error *ngIf="FormControl2.hasError('required')">FormControl2 *</mat-error>
    <mat-error *ngIf="FormControl2.hasError('min')">FormControl2 > 0</mat-error>
    <mat-error *ngIf="FormControl2.hasError('max')">FormControl2 < 31</mat-error>
</mat-form-field>

如果有人能解决我的问题，我就是一个接受者。 StackBlitz HERE

谢谢

Answer 1

我找到我的问题所在了。如果没有错误，我的 validator 的 checkError() 函数应该不会 return 任何东西：

checkError(fieldControl: FormControl): { [s: string]: boolean } {
    console.log(fieldControl);
    if (fieldControl.value === 2) {
        return { error: true }
    }
}

如何正确使用带有自定义验证器的 FormControl？ [Angular / Angular Material]

How to use a FormControl with a Custom Validators correctly ? [Angular / Angular Material]

angular

angular-material

angular-material2

angular-forms

angular-validator