当第一个 Select 选项尚未 Select 在 Angular 中编辑时禁用第二个 Select 选项 4

Question

如果我没有 select 第一个 select 选项，我如何禁用第二个 select 选项和输入值？就我而言，我的第一个 select 选项是 "Select Ingredient"。我在 "Select Ingredient" 中有一个事件，如果订阅并且结果成功，那么应该启用第二个 select 选项和输入值？这是我制作的 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);
    //       })
  }

Answer 1

您可以先收听禁用 topping_id 控件，然后通过订阅其控件 valueChange Observable 收听 ingredient_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();
  }
});

选择ingredient_id值时，您可以手动启用浇注控制。

Here is a forked stackblitz

Answer 2

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

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

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

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

希望对您有所帮助。

当第一个 Select 选项尚未 Select 在 Angular 中编辑时禁用第二个 Select 选项 4

Disable Second Select Option When First Select Option Is Not Yet Selected in Angular 4

angular

angular-reactive-forms

angular4-forms