使用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

希望這能解決您的問題。