Question

在我的Plunk中，我有一个包含两个按钮和一个输入字段的父组件。第一个按钮将设置一个标志以显示子组件，该组件将获取父元素的表单组。它为此表单组添加了另一个输入字段，其中包含＆＃34; required＆＃34;验证

第二个按钮配置为＆＃34;禁用＆＃34;如果使用的表格组无效：

<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-raised-button指令，可将其转换为材质按钮。如果在输入字段中键入内容，则凸起按钮将启用。如果你按下＆＃34;添加孩子＆＃34;按之后键入内容，您将在控制台中收到错误消息：

app.component.html：4：14导致错误：表达式已更改检查后。以前的价值：＆＃39; false＆＃39;。当前价值：＆＃39; true＆＃39;。

但是等一下：如果您现在从按钮中删除md-raised-button以将其用作本机控件，则相同的实验将成功不带错误消息。 Ergo：材料设计组件似乎做了导致这种情况发生的事情。任何想法：

为什么会这样？
我怎么能摆脱这个错误？

Answer 1

因为单击该按钮会触发一个导致formGroup被触发的事件，并将第二个按钮上的disabled属性设置为true。这一切都发生在变化检测周期内，这意味着一个值在周期内发生变化。这通常是不良做法的表现。设置更改后，您可以考虑使用其他结构或实施ChangeDetectionRef和detectChanges：

仅显示相关代码

private show: boolean;

constructor(private changeRef: ChangeDetectorRef) {}

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

working plnkr

更改检测和材料2

1 个答案: