検出と素材の変更2

Question

私のPlunkには、2つのボタンと1つの入力フィールドを持つ親コンポーネントがあります。最初のボタンは、子要素を表示するフラグを設定し、親要素のフォームグループを取得します。このフォームグループにもう1つの入力フィールドを追加し、「必須」検証を行います。

使用フォームグループが有効でない場合は、2番目のボタンが「無効」になるように構成されています

<form [formGroup]="formGroup"> 
     <input type="text" [formControl]="formGroup.get('nameParent')" /> 
     <child *ngIf="show===true" [inputform]="formGroup"></child> 
     <button (click)="addChild()">Add child</button> 
     <button [disabled]="!formGroup.valid" md-raised-button>Valid</button> 
</form> 

番目のボタンは、材料のボタンにそれを変換MD-上げボタンディレクティブを、持っています。 入力フィールドに何かを入力すると、上げられたボタンが有効になります。あなたは後、「子を追加」ボタンを押すと、あなたはコンソールでエラーになります何かを入力：app.component.htmlで

エラー：4：によって引き起こさ14：式が後 を変更しましたチェックした。以前の値： 'false'。現在の値： 'true'

しかし、待っ： をあなたは今、ネイティブコントロールとしてそれを使用するためのボタンからMD-上げボタンを削除した場合、同じ実験をエラーメッセージなしを成功します。 Ergo：材料設計コンポーネントは、これが起こる原因となっているようです。任意のアイデア：

1. これはどうしてですか？
2. どうすればこのエラーを取り除くことができますか？

Answer 1

ボタンをクリックするとformGroupをトリガする必要があるために発生したイベントを発生させ、そしてtrueに2つ目のボタンのdisabledプロパティを設定しているため。これはすべて変更検出サイクル内で発生します。つまり、サイクル内で値が変更されます。これは通常、悪い習慣の兆候です。あなたが変更を設定した後ChangeDetectionRefとdetectChangesを異なる構造を使用するか、実装を考えることができます。

のみ関連するコード

private show: boolean; 

constructor(private changeRef: ChangeDetectorRef) {} 

addChild() { 
    this.show = true; 
    this.changeRef.detectChanges(); 
} 

working plnkr