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

反应性表单，在ngOnChanges不更改模板后禁用表单控件

0 个答案: