最初選択オプションが角度4で選択されていないときに2番目の選択オプションを無効にする

Question

最初の選択オプションを選択していないとき、2番目の選択オプションと入力値を無効にするにはどうすればよいですか？私の場合、最初の選択肢は「成分の選択」です。私は "Select Ingredient"のイベントを持っており、購読してその結果が成功すれば、2番目の選択オプションと入力値を有効にする必要がありますか？ここでは、私が作った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

コードを、以下のことにより、第2の形式を無効にします。

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

最初のドロップダウンがコードに従うことによって制御を可能にする、その後変更されたとき：

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

はそれに役立つことを願っています。

Answer 2

あなたは、その制御とvalueChange観察可能に加入することによって選択をingredient_ifに耳を傾ける、その後、topping_idコントロールを無効に最初に聴くことができます。

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