Materiał kątowy - pokaż błąd mat na kliknięciu przycisku - kątowy, maszynopis, materiał kątowy

Próbuję przeprowadzić weryfikację przy użyciu <mat-for-field> i <mat-error>. Działa to dobrze, gdy użytkownik tabuluje dane wejściowe bez wypełniania. Ale jak wymusić wyświetlanie tego błędu po kliknięciu przycisku? Nie używam przesyłania. Ponadto za pomocą formularzy opartych na szablonach.

To jest mój kod:

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

Odpowiedzi:

6 dla odpowiedzi № 1

Zobacz, jak używać formularza z niestandardowym ErrorStateMatcher

Jeśli chcesz zastąpić to zachowanie (np. pokazać błąd jak najszybciej ponieważ nieprawidłowa kontrola jest brudna lub gdy nadrzędna grupa formularzy jest Nieprawidłowy), można użyć właściwości errorStateMatcher matInput. Właściwość przyjmuje instancję obiektu ErrorStateMatcher. Na ErrorStateMatcher musi zaimplementować jedną metodę isErrorState, która pobiera FormControl dla tego matInput, a także formularza nadrzędnego i zwraca wartość logiczną wskazującą, czy błędy powinny być wyświetlane. (prawdziwe wskazując, że powinny być pokazane, i fałszywe wskazując, że tak nie powinieneś.)

Zrobiłbym osobny plik, taki jak 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));
}
}

Następnie w pliku TS dodaj:

matcher = new MyErrorStateMatcher();

Następnie zmień dane wejściowe, aby użyć dopasowywania:

<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 dla odpowiedzi nr 2

Na podstawie postu Kyle'a Pfromera znalazłem moje rozwiązanie (tego samego problemu):

W pliku TS dodałem StateMatcher po znalezieniu nieprawidłowego formularza, np.

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

W klasie MyErrorStateMatcher zmieniłem następująco:

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

Uważam za mylące, że Materiał Kątowy i tak nie wykrywa błędu.

---

0 dla odpowiedzi № 3

Możesz także łatwo zadzwonić na numer AbstractControl.updateValueAndValidity() funkcja po kliknięciu przycisku. Spowoduje to ponowne uruchomienie procesu sprawdzania poprawności na odpowiednim ForControl i wyświetlenie błędów, jeśli takie występują (na podstawie twoich Walidatorów).

W twoim przykładzie:

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

---