How to disable the options lists until another dropdown is selected in reactive forms-CodePudding

I have ractive forms angular In that I need to disable the second dropdown until first down value is selected.

.component.ts

 public addNew() {
   
    this.infoForm = this.formbuilder.group({
      category:["", Validators.required],
      action: ["", Validators.required],
     
    });
   }

.component.html

//first dropdown
<select id="category"  formControlName="category" required (change) ="changeList($event.target.value)" >
           <option>option1</option>
             <option>option2</option>
            <option>option3</option>  
          </select>

//second dropdown
           <select id="action"  formControlName="action" required>
           <option>select1</option>
             <option>select2</option>
            <option>select3</option>  
          </select>

In the above I need to disable the dropdown until first down is selected. I have tried with disabled attribute but not working Can anyone helpme on this

CodePudding user response：

Try this one:

 <form [formGroup]="infoForm">
   //first dropdown
   <select id="category"  formControlName="category" required>
     <option></option>
     <option value="1">option1</option>
     <option value="2">option2</option>
     <option value="3">option3</option>
   </select>
 
   //second dropdown
   <select id="action"  formControlName="action" required [attr.disabled]="(category.value) ? null : true">
     <option value="1">select1</option>
     <option value="2">select2</option>
     <option value="3">select3</option>
   </select>
 
 </form>

I add more get function to do a short hand in .ts file

get category(): FormControl {
  return this.infoForm.get('category');
}