form-field: support swapping various child components with ngIf
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
#### Bug, feature request, or proposal:
I recently ran into a bug that `mat-hint` threw an error when its corresponding `matInput` is inserted conditionally. E.g. take the following template:
```
Some hint.
```
Note that the only reason inputs are inserted conditionally here is because the placeholder text is different depending on the condition.
This will throw the following error:
```
app.component.html:7 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null'. Current value: 'mat-hint-0'.
at new d (VM8254 zone.min.js:1)
at viewDebugError (VM7606 core.umd.js:8466)
at expressionChangedAfterItHasBeenCheckedError (VM7606 core.umd.js:8444)
at checkBindingNoChanges (VM7606 core.umd.js:8608)
at checkNoChangesNodeDynamic (VM7606 core.umd.js:12515)
at checkNoChangesNode (VM7606 core.umd.js:12464)
at debugCheckNoChangesNode (VM7606 core.umd.js:13241)
at debugCheckRenderNodeFn (VM7606 core.umd.js:13181)
at Object.eval [as updateRenderer] (VM7993 AppComponent.ngfactory.js:78)
at Object.debugUpdateRenderer [as updateRenderer] (VM7606 core.umd.js:13163)
at checkNoChangesView (VM7606 core.umd.js:12283)
at callViewAction (VM7606 core.umd.js:12650)
at execEmbeddedViewsAction (VM7606 core.umd.js:12628)
at checkNoChangesView (VM7606 core.umd.js:12282)
at callViewAction (VM7606 core.umd.js:12650)
```
This is not a problem when the input is not inserted conditionally but rather placed in the template right away. **I'm not sure if that is by design or not** but it caused me some hours of debugging until I realised it was the combination of `mat-hint` inside a `mat-form-field` whom\s `matInput` is rendered using `*ngIf`.
#### What is the expected behavior?
I expected this to just work, but again, maybe this is by design but then we should document somewhere that `matInput`s aren't allowed to be inserted using structural directives.
#### What is the current behavior?
Described above.
#### What are the steps to reproduce?
Here's a plunk that reproduces the error: http://plnkr.co/edit/MrUvFVKIW1BoX9d96eeu?p=preview
Simply check the console.
#### What is the use-case or motivation for changing an existing behavior?
#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
I'm using `@angular/material` version `2.0.0-beta.11` but the plunk uses the latest version. Unfortunately I can't tell if this error has been thrown in older versions as well.
#### Is there anything else we should know?
Yeah, you're all doing an amazing job. Thanks for that.
コントリビューションガイド
調査の方向性
issue のテンプレート例とリンクされた Plunker から始め、mat-hint と併せて matInput の子要素を *ngIf で挿入したときに ExpressionChangedAfterItHasBeenCheckedError が再現することを確認します。子要素の条件付き変更に関係する mat-form-field、matInput、mat-hint の挙動を読み取ります。条件付きで inputs を入れ替えても報告されたエラーが発生せず、再現したケースのテストカバレッジがあることを完了条件とします。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100