disable reactive form select form control in a form array

Question

I am trying to disable a select form control by checking a condition in a reactive form and I could not do it dynamically in my form component. Was wondering if anybody did this before?

let control = <FormArray>this.scheduleForm.controls.schedulingAvailability;
this.scheduleObj.schedulingAvailability.forEach(x => {
  control.push(this.formBuilder.group({
    day: x.day,
    startTime: x.startTime,
    status: x.status
  }))
  if(x.status) {
    this.scheduleForm.get('x.startTime').enable();
  } else {
    this.scheduleForm.get('x.startTime').disable();
  }
})

And in my component, I have set-it up as following

<div formArrayName="schedulingAvailability">
    <div *ngFor="let d of scheduleForm.controls.schedulingAvailability.controls; let i=index">
        <div formGroupName="{{i}}">
            <div class="row">
                <div class="col-md-1">
                    <label class="checkbox">
                        <input type="checkbox" formControlName="status">
                        <span class="checkbox__input"></span>
                        <span class="checkbox__label">{{ scheduleObj.schedulingAvailability[i].day }}</span>
                    </label>
                </div>
            <div class="col-md-2">
                <div class="form-group__text select">
                    <select formControlName="startTime">

What is the problem exactly? What does I could not do it dynamically in my form component. mean? — AVJT82
– AVJT82, Commented Jan 17, 2018 at 12:53
Sorry Alex, this is the error message - core.es5.js:1020 ERROR TypeError: Cannot read property 'disable' of null — David Jeyathilak
– David Jeyathilak, Commented Jan 17, 2018 at 17:11

AVJT82 · Accepted Answer · 2018-01-21 10:27:11Z

There is no such variable as this.scheduleForm.get('x.startTime'). startTime is present in the formArray schedulingAvailability. So what you need to access that current index of the formarray in your iteration. So what you would do, is to change the forEach to a for loop instead, so that we can get the hold of the current index of the iteration:

let control = <FormArray>this.scheduleForm.controls.schedulingAvailability;

for (let i = 0; i < this.scheduleObj.schedulingAvailability.length; i++) {
  control.push(this.formBuilder.group({
    status: this.scheduleObj.schedulingAvailability[i].status,
    startTime: this.scheduleObj.schedulingAvailability[i].startTime
  }))

  // access the current formgroup of your formarray
  let fg = control.get([i])
  if (fg.get('status').value) {
    fg.get('startTime').enable();
  } else {
    fg.get('startTime').disable();
  }
}

StackBlitz

Edit: As the value can be disabled, we need to remember that it's not included in the form values. So if you want to get the disabled values as well, use this.scheduleForm.getRawValue()

Collectives™ on Stack Overflow

disable reactive form select form control in a form array

1 Answer 1

StackBlitz

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related