如何禁用选项列表，直到以反应形式选择另一个下拉列表

Question

我有 ractive 形式 angular 因为我需要禁用第二个下拉列表，直到选择第一个下拉值。

.component.ts

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

.component.html

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

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

在上面我需要禁用下拉菜单，直到选择第一个下拉菜单。我试过禁用属性但没有工作谁能帮我解决这个问题

Answer 1

试试这个：

 <form [formGroup]="infoForm">
   //first dropdown
   <select id="category" class="form-control" 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" class="form-control" 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>

我在.ts文件

中添加了更多的get函数来做一个速记

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

如何禁用选项列表，直到以反应形式选择另一个下拉列表

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

angular

typescript

dropdown

angular-reactive-forms