Как отключить поле с помощью построителя форм в Angular

Question

Здравствуйте. Я хочу отключить поле / раскрывающийся список на основе условий построителя угловой формы:

У меня есть 3 раскрывающихся списка, первое раскрывающееся меню будет загружаться при загрузке страницы .. когда я выбираю параметр вдолжна быть включена первая выпадающая секунда, когда я выбираю опцию, во второй третьей должна быть включена.

вот что я пробовал:

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

Я пробовал выше, но это не такработает ..

Answer 1

вам нужно использовать свойство valueChange, а не значение

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

в случае отключения формы по умолчанию

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

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

Answer 2

в дополнение к ответу @ malbarmawi сначала отключите listOfAnimals

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