Input does not disable on resetting a Reactive Form in Angular 6

Question

I have created a StackBlitz example of my problem.

I have a FormService that builds a form, which is obtained by the component in the initForm() method:-

public getForm() {
  return this.fb.group({
    cb1: this.fb.control(false),
    cb2: this.fb.control(false),
    inputBox: this.fb.control({value: '', disabled: true}, Validators.required)
  });
}

I need to disable the input text box if none of the checkboxes is selected. Which brings me to do something like this :-

if(!this.cb1.value && !this.cb2.value) {
  this.isCheckboxSelectionInvalid = true;
  this.inputBox.disable();
} else {
  this.isCheckboxSelectionInvalid = false;
  this.inputBox.enable();
}

This works for all default scenarios - however there is a problem. When I call resetForm() (provided the input is enabled by checking one of the checkboxes) which basically calls the same method of initForm(), the input stays enabled. This is even after I call the method that validates checkbox selection and disables the input in the initForm() method.

For sanity, I logged the value of the input's disabled property - which logs true.

Why is it that the input doesn't get disabled then? Any help would be very appreciated, this is a problem at work.

Answer 1

The problem you are facing is related to an angular bug, you can find more info here.

There are some workarounds that worked for me:

1. Call disable function inside setTimeout.

validateCheckboxSelectionAndChangeInputState() {
  if (!this.cb1.value && !this.cb2.value) {
     this.isCheckboxSelectionInvalid = true;
     setTimeout(() => {
        this.inputBox.disable();
     }, 0);
  } else {
     this.isCheckboxSelectionInvalid = false;
     this.inputBox.enable();
  }
}

2. Set directly the disabled attribute:

<input type="text" [attr.disabled]="form.controls['inputBox'].disabled" formControlName="inputBox" />

3. Call detectChanges before calling enable/disable functions.

validateCheckboxSelectionAndChangeInputState() {
  this.ref.detectChanges();
  if (!this.cb1.value && !this.cb2.value) {
    this.isCheckboxSelectionInvalid = true;
    this.inputBox.disable();
  } else {
      this.isCheckboxSelectionInvalid = false;
      this.inputBox.enable();
  }
}

---

Suggestions not related to the problem:

---

With the idea of ​​enabling or disabling the control, you can subscribe to form valueChanges:

  initForm() {
    this.form = this.formService.getForm();
    this.cb1 = this.form.get("cb1");
    this.cb2 = this.form.get("cb2");
    this.inputBox = this.form.get("inputBox");
    this.form.valueChanges.subscribe(
      this.validateCheckboxSelectionAndChangeInputState.bind(this)
    );     
  }

  validateCheckboxSelectionAndChangeInputState(controls) {
    if (this.inputBox.disabled && controls.cb1 && controls.cb2) {
      this.inputBox.enable();
    } 
    if(this.inputBox.enabled && !controls.cb1 && !controls.cb) {
       setTimeout(() => {
          this.inputBox.disable();
       }, 0);
    } 
  }

  toggleCb1() {
    this.cb1.setValue(!this.cb1.value);
  }

  toggleCb2() {
    this.cb2.setValue(!this.cb2.value);
  }

  resetForm() {
    this.initForm();
  }

Also you can [disabled] the button using form.valid, and using the Validators.requiredTrue:

html

 <button [disabled]="!form.valid" (click)="submitForm()">
    Submit
  </button>

ts

public getForm() {
    return this.fb.group({
      cb1: this.fb.control(false, [Validators.requiredTrue]),
      cb2: this.fb.control(false, [Validators.requiredTrue]),
      inputBox: this.fb.control(
        { value: "", disabled: true },
        [Validators.required]
      )
    });
  }

See https://stackblitz.com/edit/angular-6-reactive-form-disable-jn4cf8?file=src%2Fapp%2Fapp.component.ts

Answer 2

How about not making another form instance, and actually resetting existing form?

  resetForm() {
    this.form.reset({
      cb1: false,
      cb2: false
    });
    this.validateCheckboxSelectionAndChangeInputState();
  }

https://stackblitz.com/edit/angular-6-reactive-form-disable-pefhmc