Как правильно использовать FormControl с пользовательскими валидаторами? [Угловой / Угловой Материал] - PullRequest
Новая
       47

Как правильно использовать FormControl с пользовательскими валидаторами? [Угловой / Угловой Материал]

0 голосов
/ 11 июня 2019

У меня проблема с отображением при использовании пользовательского Validators на FormControl. Один из моих вводов ошибочен, а ошибки нет.

enter image description here

Вот мои два 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 ЗДЕСЬ

Спасибо

1 Ответ

0 голосов
/ 11 июня 2019

Я нашел, где моя проблема.Функция checkError() моего validator не должна ничего возвращать, если нет ошибки: 

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