Question

直到Angular的“final”2.0我已经完成了这个：

<input type="text" formControlName="name" [disabled]="!showName">

动态禁用/启用表单输入。

从Rc7升级到2.0后，我在控制台窗口中收到此警告：

看起来你正在使用带有反应式表单指令的disabled属性。如果将disabled设置为true 当您在组件类中设置此控件时，实际上将在DOM中设置disabled属性您。我们建议使用此方法来避免“检查后更改”错误。

我已将我的代码更改为遵循这些说明：

this._userGroupUsersForm = this._formBuilder.group({
        'users': [{'', disabled: this.showName}, Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(50), Validators.pattern("^[a-zA-ZåäöÅÄÖ 0-9_-]+$")])]
    });

这适用于初始页面加载，但我不能再像这样切换状态：

toggleName() : void { this.showName = !this.showName; }

我该如何解决这个问题？

注意：我这样做的“旧”方式（通过设置[禁用]）也不再起作用。

Answer 1

同样的问题让我拉扯我的头发。我的解决方案是使用插值而不是单向绑定来更新属性。在您的情况下，而不是使用：

<input type="text" formControlName="name" [disabled]="!showName">

你可以这样做：

<input type="text" formControlName="name" disabled="{{!showName}}">

一旦我这样做，我就可以动态地禁用/启用表单中的元素。

我希望这有帮助！

Answer 2

您可以尝试在输入中使用readonly属性。

已停用＆gt;＆gt;＆gt;只读

＆＃13;

<input type="text" formControlName="name" [readonly]="!showName">

＆＃13;

Answer 3

这应该有效

toggleName() : void { 
  let ctrl = this.form.get('name')
  ctrl.enabled ? ctrl.disable() : ctrl.enable()
}

Answer 4

从RC6开始，您需要调用disable（）函数RC6 Forms: disabled attribute cannot be set dynamically anymore。

Answer 5

如果有人滚动浏览这个并且接受的答案（Günters）不起作用，因为它起初并不适合我。可能是您尝试将其与自定义组件一起使用，并且未在setDisabledState(isDisabled: boolean)界面中实现可选方法ControlValueAccessor。

Answer 6

您必须使用：

[attr.disabled]

而不是：

[disabled]

我希望它有效。

Angular 2：禁用输入更改无效

6 个答案: