angular / angular/components

form-field: support swapping various child components with ngIf

オープン
#7,737 コメント 11 件 リアクション 14 件 担当者 0 名 GitHub で見る
area: material/form-field feature P3
主要言語
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

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。