反应式表单 \- 禁用属性

Question

我正在尝试使用来自 formControl 的 disabled 属性。当我把它放在模板中时，它可以工作：

 <md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

但是浏览器提醒我：

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

>    Example:
>   form = new FormGroup({
>     first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
>     last: new FormControl('Drew', Validators.required)
>   });
>
> ```

所以我把它放在 `FormControl` 中，并从模板中删除：

constructor(private itemsService: ItemsService) { this._items = []; this.myForm = new FormGroup({ id: new FormControl({value: “, disabled: true}, Validators.required), title: new FormControl(), description: new FormControl() }); this.id = this.myForm.controls[‘id’]; this.title = this.myForm.controls[‘title’]; this.description = this.myForm.controls[‘description’]; this.id.patchValue(this._items.length); }

”`

但它不起作用（它没有禁用 input ）。问题是什么？

原文由 FacundoGFlores 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我一直在使用 [attr.disabled] 因为我仍然喜欢这个模板驱动而不是编程 enable()/disable()，因为它是卓越的 IMO。

改变

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

至

<md-input formControlName="id" placeholder="ID" [attr.disabled]="true"></md-input>

如果您正在进行更新的材料更改 md-input 到 mat-input 。

原文由 bhantol 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以按照以下步骤禁用页面上的多个控件。在页面加载后创建控件后更改控件时，您不会收到 Reactive forms - disabled 属性错误。

 this.formNextBonusGroup = NextTypePrim.asFormGroup();
 for (var control in this.formNextBonusGroup.controls)
{
  if (this.detailInputVisible)
  {
     this.formNextBonusGroup.get(control).disable();
  } else
  {
      this.formNextBonusGroup.get(control).enable();
  }
}

原文由 Onur Dikmen 发布，翻译遵循 CC BY-SA 4.0 许可协议