Angular如何根据第一个下拉选择变化将第二个下拉值置为null

问题原因分析 #

• 你混用了原生事件语法和Angular模板语法，原生onChange绑定的是全局作用域的方法，无法直接访问到Angular组件内的表单实例，所以不生效
• Angular 响应式表单的cosForm.value是只读对象，直接修改它的属性不会触发表单状态更新，必须调用setValue/patchValue方法修改值
• 用ngIf隐藏表单控件时，该控件依然属于表单组的一部分，它的校验规则（如required）仍然生效，这就是你提交按钮莫名禁用的原因：隐藏的第二个下拉框还在参与表单校验
• 你的模板里同时写了ng-model和formControlName，属于混用模板驱动表单和响应式表单的语法，会导致状态冲突，需要删掉ng-model相关代码

解决方案 #

第一步：修改第一个下拉框的事件绑定 #

给第一个select标签替换事件绑定语法，删掉多余的ngModel：

<select 
  class="form-control" 
  placeholder="customer" 
  autocomplete="customer"
  formControlName="customer" 
  required
  [ngClass]="{ 'is-invalid': submitted && f.customer.errors, 'is-valid': f.customer.touched && !f.customer.errors }"
  (change)="handleCustomerChange()"
>
  <option *ngFor="let customer of myCustomers" value="{{customer._id}}">{{customer.name}}</option>
</select>

第二步：在组件ts文件中添加联动处理方法 #

// 把下面的secondSelect替换成你第二个关联下拉框对应的formControlName
handleCustomerChange() {
  const targetCustomerId = '617e7d83c68272eba7c36c13';
  if (this.cosForm.value.customer !== targetCustomerId) {
    // 清空第二个下拉框的值
    this.cosForm.patchValue({
      secondSelect: null
    });
    // 重置控件的校验状态，避免残留的错误提示影响表单
    const secondControl = this.cosForm.get('secondSelect');
    secondControl?.markAsPristine();
    secondControl?.updateValueAndValidity();
  }
}

可选优化：避免隐藏控件影响表单校验 #

如果需要彻底避免隐藏的下拉框影响表单校验，可给第二个下拉框添加disabled绑定，禁用的控件不会参与表单的校验和值计算：

<div *ngIf="cosForm.value.customer=='617e7d83c68272eba7c36c13'">
  <div class="form-group text-right">
    <label class="col-form-label" for="secondSelect">第二个下拉框</label>
    <select 
      class="form-control" 
      formControlName="secondSelect" 
      required
      [disabled]="cosForm.value.customer!=='617e7d83c68272eba7c36c13'"
    >
      <!-- 选项代码 -->
    </select>
  </div>
</div>

常见错误纠正 #

你之前写的*ngIf="cosForm.value.customer=='!617e7d83c68272eba7c36c13'"语法错误，不等判断的正确写法是cosForm.value.customer!=='617e7d83c68272eba7c36c13'，感叹号需要放在等于号前，不能写在字符串内部。

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