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

Question

我在我的 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">

每当我选中 'Volume' 复选框时，它应该启用 'volume' 控制。但它不会在启用和禁用之间切换。但是，如果我安慰 'measurement.checked'，它会显示 true 或 false。如何通过本地引用启用或禁用？谢谢。

Answer 1

无法像您的方法那样动态设置禁用以获取更多信息 https://github.com/angular/angular/issues/11271。但是您可以通过 onchange 中的函数启用或禁用 [=13=]() ， control.disable()

Answer 2

可以通过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

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

Angular 6 can't disable enable input with local reference

angular-reactive-forms

angular7