angular - 为什么 [disabled] ="canDisable"不适用于 Angular2 react 形式

Question

我正在尝试根据组件中的变量“canDisable”禁用 angualr2 中的响应式(Reactive)输入表单控件。
我的代码看起来像这样。

<input type="text" formControlName="CustomerName" Name="CustomerName" 
[disabled]="canDisable"/>

不幸的是，它没有按预期工作，任何人都可以向我提供原因。

但是，如果我这样做 [attr.disabled]="canDisable"，它工作正常。

   <input type="text" formControlName="CustomerName" Name="CustomerName" 
    [attr.disabled]="canDisable"/>

Answer 1

经过简短的调查，我发现设置 disabled输入 FormControl 原因 ReactiveErrors.disabledAttrWarning() :

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
you. We recommend using this approach to avoid 'changed after checked' errors.

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)

根据 this comment这样做的另一个官方解决方案似乎是调用 FormControl.disable()手动方法，上述原因再次与更改检测有关。我同意它可以被视为一个错误......
并且在 angular/material2中也有一些解释。存储库: https://github.com/angular/material2/issues/2667#issuecomment-275280698

如您所见 in the docs :禁用的控件免于验证检查，并且不包括在其祖先控件的聚合值中。 - 也许这是明确这样做的另一个原因。