Question

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

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

不幸的是，它没有按预期工作，任何人都可以为我提供理由。

然而，它工作正常如果我[attr.disabled] =“canDisable”。

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

Answer 1

经过简短调查，我发现在FormControl中设置disabled输入会导致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()方法，并且上述原因再次涉及变更检测。我同意它可以被认为是一个bug ... 在angular/material2存储库中也有一些解释：https://github.com/angular/material2/issues/2667#issuecomment-275280698

正如您所看到的那样in the docs：已禁用的控件不受验证检查，并且不包含在其祖先控件的聚合值中。 - 也许这是明确执行此操作的另一个原因

Answer 2

[disabled]是property binding。似乎有角度的团队不允许在Reactive Forms中使用它。要禁用它，您需要使用disable()

中的FormControl方法另一方面，在我看来，当你通过attribute binding =＆gt;进行绑定时，他们并没有应用相同的行为。 [attr.disabled]（我不知道它是否是一个错误，或者他们是否故意这样做，因为大多数人使用的property binding超过attribute binding

所以我想说你之所以寻找的原因是：有角度的团队已经阻止使用 禁用的属性绑定 而不是 在Reactive Forms上禁用属性绑定 。

您可以看到this discussion关于属性绑定的使用，并看到有些人使用属性绑定来解决他们的问题＆＃34;但角度团队中没有人说过这件事。

通过属性绑定工作和使用属性绑定在Reactive Forms上使用禁用的原因并不是您需要向Angular Team提出的问题。你可以打开一个关于它的问题。

Answer 3

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);
    }

}

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

3 个答案: