CODEWITHSUNDEEP
angular
john
john

Reputation: 707

How to toggle input fields in Angular 6?

I want to dynamically toggle (enable and disable) one or the other <input>.

Desired behavior: When user selects Yes, the first <input> is enabled but the second <input> is disabled. When user clicks No, vice versa.

Here is what I tried https://stackblitz.com/edit/angular-reactive-forms-pfacix

The Value Selected {{}} correctly logs true and false. So I know 100% that the boolean value is getting assigned.

But for some reason the attr.disabled doesn't toggle. It only works the first time I click it only. Why ? ? ? I tried to use disabled disable attr.disable I tried all variations

Upvotes: 1

Views: 1956

Answers (1)

Kedar9444
Kedar9444

Reputation: 1853

The beauty of reactive forms is you can catch values changes event of any input element very easily and at the same time you can change their values/ status. So here is the way to tackle your problem.

Subscribe to value changes event of yesNoToggle field and enable disable the input fields based upon the value

subscribeYesNoToggle() {
    this.SignupForm.get('yesNoToggle').valueChanges.subscribe(data => {

      if (data === 'false') {
        this.SignupForm.get('mustToggle1').disable();
        this.SignupForm.get('mustToggle2').enable();
      } else{
        this.SignupForm.get('mustToggle2').disable();
        this.SignupForm.get('mustToggle1').enable();
      }
    })
  }

Here is the complete solution on stackblitz.

Upvotes: 4

Related Questions