Misleading *ngIf attribute in <mat-error> example?
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
#### 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
コントリビューションガイド
調査の方向性
フォームフィールド概要の「エラーメッセージ」セクションから始め、mat-error の例と、FormControl のエラー状態について周辺で説明されている内容を確認してください。完了の条件は、例とドキュメントで *ngIf* の役割が正確に説明され、提案された template の例が複数のメッセージの処理方法を明確に示していることです。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- documentation
- issue の種類
- ドキュメント
- 難易度
- 2/5
- 見積もり時間
- 1〜3時間
- 活発さ
- 停滞
- 明瞭さ
- 明確に書かれている
- 初心者へのやさしさ
- 52/100