angular / angular/components

Misleading *ngIf attribute in <mat-error> example?

Aperta
#18,430 4 commenti 23 reazioni 0 assegnatari Vedi su GitHub
area: material/form-field docs needs: discussion P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

#### Documentation Feedback

I was working on form validation and wanted to take advantage of `` elements. I based my code on the following example:
```



Enter your email

{{getErrorMessage()}}


```
As many, I thought at first that it was possible to use `` for its aesthetics only and that using a `FormControl` was optional. But apparently, `` shows up only if there is a `FormControl` used at some point, and if that `FormControl` is in an error state. The docs also state that:

> If a form field can have more than one error state, it is up to the consumer to toggle which messages should be displayed. This can be done with CSS, `ngIf` or `ngSwitch`.

Which means, if I got that right, that `*ngIf` is more of an **additional** condition deciding if `` is displayed and has no effect if the `FormControl` isn't already in an error state. According to my tests, this seems to be the case. If I am right, I think this line is incredibly misleading:
```
{{getErrorMessage()}}
```
Because that `*ngIf="email.invalid"` does not dictate if the `` element is displayed (something anyone sane thinks it does at first sight), nor does it have any interesting effect in this example since `email.invalid` seems to always be true if the `` element is displayed. During my tests, having `*ngIf="email.invalid"` or not did not make any difference.

Consequently, I suggest:

- that `*ngIf="email.invalid"` is removed from the aforementioned example,
- that ``'s dependency on using a `FormControl` is explicitly mentioned in the docs
- and that, maybe, another example showing how the `*ngIf` is used to handle several error messages **in the template** (instead of using `getErrorMessage()` in the component's TS file) is added.

**Affected documentation page:** https://material.angular.io/components/form-field/overview#error-messages

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dalla sezione «Messaggi di errore» della panoramica dei campi del modulo e rivedi l’esempio mat-error e la spiegazione circostante degli stati di errore di FormControl. Il lavoro è completato quando l’esempio e la documentazione spiegano accuratamente il ruolo di *ngIf* e qualsiasi esempio di template proposto dimostra chiaramente come gestire più messaggi.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
documentation
Tipo di issue
Documentazione
Difficoltà
2/5
Tempo stimato
1-3 ore
Stato di attività
Ferma
Chiarezza
Specificata chiaramente
Idoneità per principianti
52/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.