How to disable a filed using form builder in Angular

Question

Hello I want to disable a filed/drop-down based on conditions angular form builder:

I have 3 drop downs, first drop down will be loading while page loading.. when I select the option in first drop-down second should be enabled, when I select the option in second third should be enabled.

here is what I tried:

       ngOnInit(): void {

            this.someMethodToFetchDataForSelectbox();
            this.method1.subscribe(data => {
                this.data= data;
              }
            );
            this.constructForm();
          }

    constructForm() {
    this.form =  this.fb.group({
     listOfFruits: [''],
     listOfAnimals: [''],
listOfLetters: ['']
    });
this.form.get('listOfAnimals').disable();
    this.form.get('listOfLetters').disable();
    this.form.controls.listOfFruits.valueChanges.subscribe(value=>{
   his.forms.controls.listOfAnimals.enable();
      this.form.get('listOfLetters').disable(); 
//method to fetch list of animals from DB
fetchAnimals(value) ;

    });
    }
fetchAnimals(value) {
 this.form.controls.listOfAnimals.valueChanges.subscribe(value=>{
   this.forms.controls.listOfLetters.enable();
      //method to fetch list of letters from DB
fetchLetters(value) ;
  });
}

I tried the above but it is not working..

Muhammed Albarmavi · Accepted Answer · 2019-05-30 18:25:50Z

3

you need to use valueChange property not value

this.form.controls.listOfFruits.valueChanges.subscribe(value => {
  //...
})

in case of disable the form control by default

constructForm() {
 this.form =  this.fb.group({
  listOfFruits: [''],
  listOfAnimals: ['']
 });

 this.form.get('listOfAnimals').disable(); // 👈
 ....
}

edited May 30, 2019 at 18:25

answered May 30, 2019 at 17:22

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

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

4 Comments

user2108383 Over a year ago

worked thanks :), small question how to disable the filed by default here

Muhammed Albarmavi Over a year ago

happy to help , I have updated the answer for disable the form control @user2108383 👍

Muhammed Albarmavi Over a year ago

@user2108383 in case this answer solve your problem it's will be could you mark it as answered ,so the question doesn't appear in unanswered questions in the search result 👍

user2108383 Over a year ago

@malbaarmawi, I have a quick requirement I edited the question.. trying form last 5-6 hours couldn't find the solution :( can you please help me .. I edited the question..

indrajeet · Accepted Answer · 2019-05-30 17:42:51Z

0

in additions to @malbarmawi's answer make listOfAnimals disable initially

this.form =  this.fb.group({
 listOfFruits: [''],
 listOfAnimals: [{value: '', disabled:true}]
});

this.form.controls.listOfFruits.valueChanges.subscribe(value => {
  (value) ? this.form.controls.listOfAnimals.enable() : this.form.controls.listOfAnimals.disable()
});

answered May 30, 2019 at 17:42

indrajeet

89710 silver badges17 bronze badges

1 Comment

user2108383 Over a year ago

some how this is not working to disable by default . listOfAnimals: [{value: '', disabled:true}]

Collectives™ on Stack Overflow

How to disable a filed using form builder in Angular

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related