Angular如何根据下拉框选中值禁用textarea问题求助

问题原因排查 #

• 混用了响应式表单formControlName和模板驱动表单[(ngModel)]，Angular 6+ 版本默认不支持该混用方式，容易触发值同步冲突，导致messageDisabled的变更未被框架正确检测。
• 绑定了formControlName的表单控件，直接在模板中使用[disabled]属性控制禁用状态不生效，Angular会优先以FormControl实例的状态为准，同时控制台会抛出相关警告。
• 未验证下拉框传值是否符合判断逻辑，可能genderList中的实际值和getdropdownGender函数中判断的a/b不匹配，导致messageDisabled未被正确赋值。

解决方案 #

方案1：完全使用响应式表单控制（推荐） #

修改component.ts代码

在表单初始化完成后，订阅性别控件的值变化，直接通过FormControl控制文本域的禁用状态：

// 替换原有getdropdownGender函数逻辑
// yourForm替换为你实际定义的FormGroup变量名
this.yourForm.get('gender').valueChanges.subscribe(value => {
  const messageControl = this.yourForm.get('message');
  if (value === 'a' || value === 'b') {
    messageControl.disable();
  } else {
    messageControl.enable();
  }
})

修改component.html代码

移除下拉框冗余的模板变量、双向绑定和change事件，移除文本域的[disabled]属性：

<div class="row">
  <div class="col-md-6">
    <div class="form-group">
      <label>Gender</label><span class="asterick">*</span>
      <select
        formControlName="gender"
        class="form-control border-primary"
      >
        <option value="">Select Gender</option>
        <option
          [value]="_position"
          *ngFor="let _position of genderList"
        >
          {{ _position }}
        </option>
      </select>
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-group">
      <label>Message</label>
      <textarea
        cols="30"
        rows="3"
        class="form-control border-primary"
        formControlName="message"
        placeholder="Message"
      >
      </textarea>
    </div>
  </div>
</div>

方案2：保留原有变量控制逻辑，修改属性绑定方式 #

如果不想改动现有逻辑，只需要将文本域的[disabled]替换为[attr.disabled]，因为HTML原生disabled属性只要存在就会生效，赋值false不会生效，必须赋值为null才会移除属性：

<textarea
  [attr.disabled]="messageDisabled ? true : null"
  cols="30"
  rows="3"
  class="form-control border-primary"
  formControlName="message"
  placeholder="Message"
>
</textarea>

验证步骤 #

可在模板中临时添加调试代码，确认messageDisabled值是否正常变化：

<p>文本域禁用状态：{{messageDisabled}}</p>

如果值正常变化但文本域未禁用，说明是属性绑定问题，采用上述两种方案修复即可；如果值未变化，可在值处理函数中打印日志确认下拉框传入的实际值是否符合判断条件。

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