Enable When Checkbox is Check in Reactive Forms

Question

I need help in making the rows enable only when the checkbox is check. The default rows should be disabled but when the checkbox is only check, that row will be enabled. Here's the link to my code

LINK CODES

  patchValues() {
    let rows = this.myForm.get('rows') as FormArray;
    this.orders.forEach(material => {
      material.materials.forEach(x => {
      rows.push(this.fb.group({
        checkbox_value: [null],
        material_id:  new FormControl({value: x.id, disabled: true}, Validators.required),
        material_name: x.name, 
        quantity: [null, Validators.required]
      }))
    })
      })

  }

Answer 1

Have a look at the Demo & Src

Stack Blitz, Fork

Explanation:

1. For enabling or disabling a input field, you need to use the following syntax [attr.disabled]="myForm.get('rows').value[i].checkbox_value ? null: ''"
2. attr.disabled, here attr is for binding with properties which don't exist directly on an element
3. myForm.get('rows').value[i].checkbox_value, is fairly straight forward access to a form control's value.

Answer 2

Another aproach is create a directive

@Directive({
  selector: '[enabledControl]'
})
export class EnabledControlDirective {

    @Input() set enabledControl(condition: boolean) {
        if (this.ngControl) {
            if (this.ngControl.control) {
                if (condition)
                    this.ngControl.control.enable();
                else
                    this.ngControl.control.disable();
            }
        }
  }
  constructor(private ngControl : NgControl ) {
  }
}

Then you can use like

<input class="col-md-6" formControlName="quantity"
     [enabledControl]="row.get('checkbox_value').value" >