如何在 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 属性而不是 value

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