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

如何在Angular中使用表单构建器禁用文件

2 个答案: