在Angular 4中尚未选择第一个选择选项时禁用第二个选择选项答案

【问题标题】：Disable Second Select Option When First Select Option Is Not Yet Selected in Angular 4在Angular 4中尚未选择第一个选择选项时禁用第二个选择选项
【发布时间】：2017-12-21 13:52:38
【问题描述】：

当我没有选择我的第一个选择选项时，如何禁用我的第二个选择选项和输入值？就我而言，我的第一个选择选项是“选择成分”。我在“选择成分”中有一个事件，如果订阅并且结果成功，那么应该启用第二个选择选项和输入值？这是我制作的stackblitz代码。

https://stackblitz.com/edit/angular-rgxfsa?file=app/app.component.ts

onSelectIngredient(event): void {
   const ingredient_id =  this.productForm.get('ingredient_id').value
    // this.subscription = this.ingredientService.selectIngredient(ingredient_id)
    // .subscribe(
    //       (data:any) => {
    //         this.ingredient = data;     
    //       },
    //       error => {
    //        console.log(error);
    //       })
  }

【问题讨论】：

标签： angular angular-reactive-forms angular4-forms

【解决方案1】：

通过以下代码首先禁用第二种形式：

this.productForm.controls["topping_id"].disable();

当第一个下拉菜单发生变化时，通过以下代码启用控制：

this.productForm.controls["topping_id"].enable();

希望它会有所帮助。

【讨论】：

【解决方案2】：

您可以先监听禁用 topping_id 控件，然后通过订阅其控件 valueChange Observable 来监听 composition_if 选择。

 this.productForm = this.formBuilder.group({
      ingredient_id: new FormControl(null, Validators.required),
      topping_id: new FormControl({ value: null, disabled: true }, Validators.required), // <- here initial disable
      input_value: new FormControl(null, Validators.required),
 });

// listen to ingredient valueChange to enable the topping
this.productForm.get('ingredient_id').valueChanges.subscribe(value => {
  if (value) {
    this.productForm.get('topping_id').enable();
  } else {
    this.productForm.get('topping_id').setValue(null);
    this.productForm.get('topping_id').disable();
  }
});

当成分_id 值被选中时，您可以手动启用浇头控制。

Here is a forked stackblitz

【讨论】：