Angular中如何根据下拉框选中值动态启用或禁用文本框

现有代码的基础语法问题 #

先修正你代码里的两个书写错误，否则事件根本不会触发：

1. (change)是select标签的事件绑定属性，必须写在<select>开始标签内部，不能写在标签外
2. 下拉提示文字select the correct value不能直接写在select标签子级，需要放在一个禁用的默认option里，否则会出现渲染异常

修正后的完整代码 #

组件类代码（dropdown.component.ts） #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent implements OnInit {
  // 输入框状态标记：true=可输入，false=禁用
  des = false

  constructor() { }
  
  // 接收入参为下拉框当前选中的value值
  onchange(selectedVal: string){
    // 分支判断逻辑：选中yes（启用）时标记为可用，否则标记为禁用
    if (selectedVal === 'yes') {
      this.des = true
    } else {
      this.des = false
    }
    // 熟悉后可简化为一行：this.des = selectedVal === 'yes'
  }

  ngOnInit(): void {
  }
}

模板代码（dropdown.component.html） #

<select 
  name="dropdown" 
  id="this"
  (change)="onchange($event.target.value)"
>
  <option value="" disabled selected>select the correct value</option>
  <option value="yes">yes</option>
  <option value="No">No</option>
</select>

<input type="text" [disabled]="!des">

两个核心疑问解答 #

• 下拉框选中值获取方式
  Angular中绑定原生change事件时，传入$event即可拿到原生DOM事件对象，通过$event.target.value就能直接取到当前选中option的value属性值，将这个值作为参数传给事件处理方法即可在组件类中使用。
  如果习惯更简洁的双向绑定写法，可在模块中导入FormsModule后，给select加[(ngModel)]绑定一个状态变量，选中值会自动同步到变量，无需手动传参：

  <select [(ngModel)]="selectedStatus" (ngModelChange)="onchange()">
  

  组件类中直接通过this.selectedStatus就能拿到当前选中值。

• if-else分支判断逻辑
  直接判断拿到的选中值和选项预设的value是否匹配即可：你的需求中value="yes"对应启用输入框、value="No"对应禁用输入框，结合你写的[disabled]="!des"绑定规则，选中yes时将des设为true（此时!des为false，输入框不被禁用），其他情况将des设为false（此时!des为true，输入框禁用）即可。

内容的提问来源于stack exchange，提问作者ravindra