Angular Material - покажете мат-грешка при натискане на бутон - ъглов, машинопис, ъглов материал

Опитвам се да правя валидиране с помощта на <mat-for-field> и <mat-error>, Това работи добре, когато потребителят раздели от входа, без да запълва. Но как да принудя тази грешка да се покаже, когато щракна върху бутон? Не използвам подаване. Също така, като използвате формуляри, задвижвани от шаблони.

Това е моят код:

HTML:

<mat-form-field>
<input matInput placeholder="Due Date" name="dueDate" [(ngModel)]="dueDate" [formControl]="dueDateValidator" required>
<mat-error *ngIf="dueDateValidator.invalid">Due Date is required for Tasks</mat-error>
</mat-form-field>

TS:

dueDateValidator: FormControl = new FormControl("", [Validators.required]);

Отговори:

6 за отговор № 1

Вижте как да използвате формуляр с персонализиран ErrorStateMatcher

Ако искате да отмените това поведение (напр. за да се покаже грешката възможно най-скоро тъй като невалидният контрол е мръсен или когато е група от родителски формуляри невалиден), можете да използвате свойството errorStateMatcher на matInput. Свойството приема екземпляр на обект ErrorStateMatcher. Една ErrorStateMatcher трябва да реализира един метод isErrorState, който приема FormControl за този matInput, както и родителската форма и връща булева информация, показваща дали трябва да се показват грешки. (вярно което показва, че те трябва да бъдат показани, и невярно, че те са не трябва.)

Бих направил отделен файл като default.error-matcher.ts

/** Error when invalid control is dirty or touched*/
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
return !!(control && control.invalid && (control.dirty || control.touched));
}
}

След това във файла TS добавете:

matcher = new MyErrorStateMatcher();

След това променете входа, за да използвате matcher:

<mat-form-field>
<input matInput placeholder="Due Date" name="dueDate" [(ngModel)]="dueDate" [formControl]="dueDateValidator" [errorStateMatcher]="matcher" required>
<mat-error *ngIf="dueDateValidator.invalid">Due Date is required for Tasks</mat-error>
</mat-form-field>

---

2 за отговор № 2

Въз основа на публикацията на Кайл Пфромер намерих своето решение (към същия проблем):

Във TS файла добавих StateMatcher, след като намерих невалидна форма, напр.

if (this.myFormGroup.invalid) {
this.matcher = new MyErrorStateMatcher();
return;
}

В класа MyErrorStateMatcher промених както следва:

    return !!(control && control.invalid);

Смятам, че е объркващо, че Angular Material изобщо не открива грешката.

---

0 за отговор № 3

Можете също така лесно да се обадите на AbstractControl.updateValueAndValidity() функция при натискане на бутон. Това ще стартира отново процеса на валидиране на съответния ForControl и ще покаже грешки, ако има такива (въз основа на валидиращите ви устройства).

Така че, във вашия пример:

    checkForErrorsOnButtonClick(): void {
dueDateValidator.updateValueAndValidity();
}

---