Обнаружение изменений и материал 2

Question

В моем Plunk У меня есть родительский компонент с двумя кнопками и одним полем ввода. Первая кнопка устанавливает флаг для отображения дочернего компонента, который получит группу форм родительского элемента. Он добавляет другое поле ввода в эту группу форм с «необходимой» проверкой.

Вторая кнопка настроена быть «отключено», если используемая форма группа не действует:

<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> 

Вторая кнопка имеет директиву мкр-фальш-кнопка, которая превращает его в кнопку материала. Если вы введете что-то в поле ввода, поднятая кнопка включится. Если нажать на кнопку «Добавить ребенка» после вы набрали что-то вы получите сообщение об ошибке в консоли:

Ошибка в app.component.html: 4: 14 вызвано следующими причинами: Expression изменилось после его был проверен. Предыдущее значение: «false». Текущее значение: «true».

Но подождите: Если теперь удалить мкр-рейзом кнопку с кнопки, чтобы использовать его в качестве родного контроля, тот же самый эксперимент будет успешным без сообщение об ошибке. Ergo: Компонент материального дизайна, похоже, делает что-то, что заставляет это произойти. Любые идеи:

1. Почему это происходит?
2. Как я мог избавиться от этой ошибки?

Answer 1

Поскольку нажав на кнопку запускает событие, которое вызывает иметь formGroup быть вызван, и установка отключенный недвижимости на вторую кнопку, чтобы true. Все это происходит внутри цикла обнаружения изменений, что означает изменение значения в цикле. Это обычно является признаком плохой практики. Вы можете думать об использовании другой структуры или реализации ChangeDetectionRef и detectChanges после установки изменения:

только показывает соответствующий код

private show: boolean; 

constructor(private changeRef: ChangeDetectorRef) {} 

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

working plnkr