为什么[disabled]="；canDisable“；不适用于Angular2反应形式

我试图根据组件中的变量“canDisable”禁用angualr2中的被动输入表单控件。 我的代码看起来像这样

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

不幸的是，它没有像预期的那样工作。有人能告诉我原因吗

但是，如果我执行[attr.disabled]=“canDisable”，则工作正常

---

经过短暂的调查，我发现设置

已禁用

输入导致：

据了解，这样做的另一个官方解决方案似乎是手动调用

FormControl.disable（）

方法，提到的原因也是关于更改检测。我同意这可以被认为是一个错误。。。 在

angular/material2

repository中也有一些关于它的解释：

---

如您所见：禁用的控件不受验证检查的约束，并且不包括在其祖先控件的聚合值中。-可能这是明确执行此操作的另一个原因。

[disabled]

是

属性绑定

。似乎angular团队不再允许在反应形式中使用此功能。要禁用它，您需要使用

FormControl

另一方面，在我看来，当你通过

属性绑定
=>
[attr.disabled]
进行绑定时，他们似乎没有应用相同的行为（我不知道这是一个bug还是他们故意这么做，因为大多数人使用
属性绑定
多于
属性绑定

所以我想说，您寻找的原因是：angular团队阻止了在被动表单上使用禁用属性绑定，而不是禁用属性绑定

您可以看到属性绑定的使用，也可以看到一些人使用属性绑定来“解决他们的问题”，但angular团队的人对此只字未提

您需要向Angular团队询问为什么通过属性绑定在被动表单上使用disabled（禁用），而通过属性绑定在被动表单上使用disabled（禁用）。您可以就此提出一个问题。
是否可更改
是一个公共变量？请提供您正在使用的代码的详细信息。是的，它是组件中的一个公共变量。我很抱歉能够在模板中访问它。@CommercialSuicide@ElmerDantas请参阅这里的问题。我想知道为什么会发生这样的事情。可能的副本不回答这个问题。它没有解释为什么。请考虑使用更多的解释。
import { AfterViewInit, ChangeDetectorRef, Directive, ElementRef, Input, Renderer2 } from "@angular/core";

@Directive({
    selector: "[customDisable]"
})
export class CustomDisableDirective implements AfterViewInit {

    private _isDisabled: boolean = false;

    @Input('value')
    set isDisabled(value) {
        this._isDisabled = value;
        this.changeDetector.markForCheck();
        this.changeDetector.detectChanges();
    }

    constructor(public el: ElementRef, private renderer: Renderer2, private changeDetector: ChangeDetectorRef) { }

    ngAfterViewInit(): void {
        // Force the control to disable
        this.renderer.setProperty(this.el.nativeElement, 'disabled', this._isDisabled);
    }

}

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)

import { AfterViewInit, ChangeDetectorRef, Directive, ElementRef, Input, Renderer2 } from "@angular/core";

@Directive({
    selector: "[customDisable]"
})
export class CustomDisableDirective implements AfterViewInit {

    private _isDisabled: boolean = false;

    @Input('value')
    set isDisabled(value) {
        this._isDisabled = value;
        this.changeDetector.markForCheck();
        this.changeDetector.detectChanges();
    }

    constructor(public el: ElementRef, private renderer: Renderer2, private changeDetector: ChangeDetectorRef) { }

    ngAfterViewInit(): void {
        // Force the control to disable
        this.renderer.setProperty(this.el.nativeElement, 'disabled', this._isDisabled);
    }

}