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

  }

Abhijit Kar ツ · Accepted Answer · 2018-03-11 07:58:26Z

5

Have a look at the Demo & Src

Stack Blitz, Fork

Explanation:

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

edited Mar 11, 2018 at 7:58

answered Mar 10, 2018 at 9:04

Abhijit Kar ツ

1,7601 gold badge14 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Joseph Over a year ago

Hi Abhijit Kar. I have putted a submit button and I need to save only those who have checkbox. So if a td has a checkbox, qty field should be inputted. Here's the forked link stackblitz.com/edit/…

Abhijit Kar ツ Over a year ago

@Joseph, have a look at the fork: stackblitz.com/edit/…. You just handle the submission in onCreateProduct() method.

Joseph Over a year ago

I'm sorry. The button "save" should be enabled too. That's my problem.

Abhijit Kar ツ Over a year ago

@Joseph have a look now

Joseph Over a year ago

Sorry I've to bother again. I saw one problem. When i click the checkbox and i input something in the quantity field and then uncheck the checkbox, i can still click the save button. It doesn't disabled.

|

Eliseo · Accepted Answer · 2018-03-10 11:37:18Z

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" >

answered Mar 10, 2018 at 11:37

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Collectives™ on Stack Overflow

Enable When Checkbox is Check in Reactive Forms

2 Answers 2

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related