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.

lissettdm · Accepted Answer · 2020-11-04 13:12:44Z

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:

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

Set directly the disabled attribute:

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

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

edited Nov 4, 2020 at 13:12

answered Nov 2, 2020 at 13:38

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

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

6 Comments

saketk21 Over a year ago

This still doesn't work. Try this - enable the inputBox by toggling ON both the checkboxes. Type something in the inputBox, and then click on Reset button. Expectation - Since both are false, The inputBox should be disabled. Reality - inputBox is enabled, we can type into it.

saketk21 Over a year ago

This is now seeming more and more like a bug in the way it is implemented in Angular itself.

lissettdm Over a year ago

Yes, I see the input is not disabled, I added a setTimeout(() => { this.inputBox.disable(); }, 0); and it works, very weird

lissettdm Over a year ago

it looks like it's a bug, github.com/angular/angular/issues/22556

saketk21 Over a year ago

Hey, nice find! I tried to find it first but to no avail. The setTimeout hack works though! Accepting this answer.

|

Bojan Kogoj · Accepted Answer · 2020-11-02 12:16:35Z

0

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

edited Nov 2, 2020 at 12:16

answered Nov 2, 2020 at 10:50

Bojan Kogoj

5,7084 gold badges39 silver badges63 bronze badges

2 Comments

saketk21 Over a year ago

Doesn't work. Tried that as well. That is because on calling reset, form values are set to null. This does not disable the input.

Bojan Kogoj Over a year ago

Edit. But you should consider adding FormGroup validation.

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related