angular - 反应式表单，在 ngOnChanges 不更改模板后禁用表单控制

Question

我正在 Angular 7 项目中使用响应式表单。在某些组件中，我有一个使用 FormBuilder 构建的表单，我需要根据输入属性禁用或启用一些控件。

这个输入属性是在父组件中从异步请求中获取的，当它的值改变时，我改变了“禁用”状态，但是模板并没有按预期改变：disabled属性没有设置在对应的<input>.

这是我的代码：

@Input() myInputProperty;
form: FormGroup;

constructor(private fb: FormBuilder) { }

ngOnChanges(changes: SimpleChanges) {
  if (changes['myInputProperty']) {
    this.buildForm();
  }
}

private buildForm() {
  this.form = this.fb.group({
    myControl: {value: myInputProperty && myInputPropery.stuff, disabled: !!myInputProperty}
  });
}

我们在 buildForm() 方法中进行了两次，一次myInputProperty未设置，一次myInputProperty已请求；第二次禁用控件但未更新模板后，该disabled属性设置在<input>.

我试过了，this.form.get('myControl').disable()但效果不好。

如果我添加一些代码，例如

  if (this.myInputProperty) {
    setTimeout(() => {
      this.form.get('myControl').disable();
    });
  }

最后buildForm()，它可以工作，但它不是一个令人满意的解决方法。

编辑：stackblitz 示例： https ://stackblitz.com/edit/angular-rkurxt?file=src%2Fapp%2Fhello.component.ts

标签： angular