angular / angular/components

form-field(select): with matNativeControl and outline where one field relies upon the value of another

オープン
#16,229 コメント 1 件 リアクション 3 件 担当者 0 名 GitHub で見る
area: material/form-field area: material/select P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

#### Reproduction

Open StackBlitz, and try to select different options, open dev tools and see errors: https://angular-jjb9g7.stackblitz.io

Steps to reproduce:
1. Add two `mat-form-field` with `appearance="outline"`
2. Add `` to each one
3. Make that second field select dynamically get options after first field value changed


#### Expected Behavior

First field changes value and second field get new options

#### Actual Behavior
First field changes value and second field get new options and errors at console are shown:
```ts
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
Previous value: 'mat-form-field-should-float: false'.
Current value: 'mat-form-field-should-float: true'.
```

#### P.S. If delete appearance="outline", no errors are shown.

#### Environment

- Angular: 7.2.0
- Material: 7.3.7 and 8.2.3
- Browser(Chrome Version 74.0.3729.108 (Official Build) (64-bit)):
- Operating System (Ubuntu 18.04):

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

リンクされた StackBlitz の再現ケースから始め、matNativeControl を使用している 2 つの枠線付き mat-form-field 要素を調べます。コンソールで ExpressionChangedAfterItHasBeenCheckedError が発生していないか確認しながら、依存する select の更新を再現します。最初のフィールドの変更後に、報告されたエラーなしで 2 つ目のフィールドが更新され、outline の外観が維持されれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
45/100

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

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