Angular 2：禁用输入更改无效-Java 学习之路

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

我该如何解决这个问题？

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

6 回答

这应该工作

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

回复于 2024-05-02T13:55:17+08:00

19

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

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

你可以这样做：

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

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

我希望这有帮助！

回复于 2024-05-02T13:55:17+08:00
6
您可以尝试在输入中使用readonly属性 .

禁用>>>只读
```
<input type="text" formControlName="name" [readonly]="!showName">
```
回复于 2024-05-02T13:55:17+08:00
4

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

回复于 2024-05-02T13:55:17+08:00
20

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

回复于 2024-05-02T13:55:17+08:00
27
你必须使用：
```
[attr.disabled]
```
代替：
```
[disabled]
```
我希望它有效 .
回复于 2024-05-02T13:55:17+08:00

Angular 2：禁用输入更改无效

6 回答

相关问题