Angular 6 无法使用本地参考禁用启用输入答案

【问题标题】：Angular 6 can't disable enable input with local referenceAngular 6 无法使用本地参考禁用启用输入
【发布时间】：2019-07-18 13:13:15
【问题描述】：

我在我的 Angular 应用程序中使用反应形式。

measurement: new FormControl(true),
volume: new FormControl(0)

在我的 html 中，我使用的是

<input type="checkbox" formControlName='measurement' #measurement>Volume
<input formControlName='volume' type="number" class="form-control input-md" [attr.disabled]="!measurement.checked">

当我选中“音量”复选框时，它应该启用“音量”控制。但它不是在启用和禁用之间切换。但是，如果我控制台“measurement.checked”它是显示真或假。如何通过本地参考启用或禁用？谢谢。

【问题讨论】：

标签： angular7 angular-reactive-forms

【解决方案1】：

可以通过typescript函数实现..

更改代码中的以下行，

<input formControlName='volume' type="number" class="form-control input-md" [attr.disabled]="!measurement.checked">

到

<input formControlName='volume' type="number" class="form-control input-md" [attr.disabled]="disableVolume()">

在你的 ts 文件中，添加函数disableVolume()，

  disableVolume() {
    if(this.form.get('measurement').value === true) {
      this.form.get('volume').enable();
    } else {
      this.form.get('volume').disable();
    }
  }

工作示例：https://stackblitz.com/edit/angular-form-array-example-cc27c3

【讨论】：

【解决方案2】：

Disabled 不能像您的方法一样动态设置以获取更多信息 https://github.com/angular/angular/issues/11271 。但是您可以通过 onchange 中的函数来启用或禁用 control.enable() ， control.disable()

【讨论】：