angular - 如何禁用选项列表,直到以反应形式选择另一个 dropdown

我有反应形式 angular 因为我需要禁用第二个 dropdown 直到选择第一个向下 value 。

.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>

在上面我需要禁用 dropdown 直到选择第一个向下。我尝试过禁用属性但无法正常工作任何人都可以帮我解决这个问题

回答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');
}

相似文章

html - 水平滚动导航栏,滚动外带有下拉内容

我需要设计一个带有“n”下拉菜单的导航栏菜单,所以我想放置一个水平滚动条以便能够滚动浏览每个按钮,但是使用我目前正在工作的代码,但下拉菜单的内容仍然存在在滚动里面所以没有这就是我寻找它的方式。就像在h...

html - Footer 在页面底部占用大量空白空间

我正在尝试制作一个页面底部有一个footer的网站。我找到了另一种关于如何将footer放置在页面底部的在线解决方案,它的效果非常好,没有任何问题。但是当我尝试让网站具有响应性时,我意识到出于某种原因...

最新文章