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

Question

How can i disable my second select option and the input value when i haven't selected my first select option? In my case, my first select option is the "Select Ingredient". I have an event in the "Select Ingredient" which if subscribes and the result is success, then second select option and the input value should be enabled? Here the stackblitz code that i have made.

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

Initially disable second form by following code:

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

when first dropdown will change then enable control by following code:

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

Hope it will help.