How to keep input disabled when the checkbox is unchecked using angular8

Question

i have used Reactive forms in Angular8 for form binding. Here, initially the form is disabled, and when i click on edit button, the form is enabled, but here, the input should be enabled only if the checkbox is checked, or it should be disabled.

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)
     }) 
  }

DEMO

Answer 1

Tweaked your code in stackblitz example here are the change you need to make in order to achieve what you expect.

Wrap your whole form inside <fieldset> and set it disabled by default.

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

In component assign default value to disabled

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

Remove form disable from ngOnInit

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

And finally in edit method set disabled false

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

Here is the stackblitz DEMO I updated your code

Hope this solve your issue.