使用angular8取消选中复选框时如何保持禁用输入

Question

我在 Angular8 中使用了 Reactive forms 进行表单绑定。 在这里，最初表单被禁用，当我单击编辑按钮时，表单被启用，但是在这里，只有在选中复选框时才应该启用输入，或者应该禁用它。

TS：

 edit() {
    this.form.enable()
  }
  restrict() {
      this.form = this.FB.group({
      array: this.FB.array(
        this.values.map(x => this.FB.group({
          boolValue: this.FB.control(x.boolValue),
          datetime: [
          { value:x.datetime, disabled: !x.boolValue }]
        }))
      )
    });    
     this.form.valueChanges.subscribe(data => {
          this.formEdit = true;
          console.log('agentSettingsInfoForm', data,this.formEdit)
        })
     this.w9InfoDetails.valueChanges.subscribe(data => {
        this.formEdit = true;
          console.log('agentSettingsInfoFormdate', data,this.formEdit)
     }) 
  }

演示

Answer 1

在 stackblitz 示例中调整了您的代码，这里是您需要进行的更改才能实现您的期望。

将整个表单包裹在<fieldset>中，并默认将其设置为禁用。

<fieldset [disabled]="disabled">
 <form [formGroup]= "form" (submit)="onSubmit()">
  ......

在组件中将默认值分配给disabled

disabled = true; // set default disabled true
form: FormGroup;    
selected: string[] = [];
......

从 ngOnInit 移除表单禁用

 ngOnInit() {
  this.restrict();
  // this.form.disable() <== remove it
 }   

最后在编辑方法中设置禁用假

  edit() {
   this.disabled = false;
   // this.form.enable() <== remove this
  }

这是我更新了您的代码的 stackblitz DEMO

希望这能解决您的问题。