Angular 2:禁用输入更改无效

Question

直到Angular的"最终"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属性.

禁用>>>只读

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

Answer 3

这应该工作

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

Answer 4

从RC6开始,你需要调用disable()函数RC6 Forms:disabled属性不能再动态设置.