forms - Angular 2 : Disable input change not working

Question

直到 Angular 的“最终版”2.0，我都这样做了:

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

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

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

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.

我已更改我的代码以遵循如下说明:

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

我该如何解决？

注意:我的“旧”方法(通过设置 [disabled])也不再有效。

Answer 1

同样的问题让我抓狂。我的解决方案是使用插值而不是单向绑定(bind)来更新属性。在你的情况下，而不是使用:

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

你可以这样做:

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

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

希望对您有所帮助!