Angular ng-select下拉框重置时如何移除无效校验状态

你直接修改ngModel绑定的变量值仅更新了控件展示内容，Angular表单的校验状态是和表单控件实例绑定的，不会随绑定变量值变更自动同步，所以会出现值清空了但校验错误状态残留的问题。

你已经给第二个ng-select声明了#selectDropdown模板引用变量，只需要在组件中拿到该引用对应的表单控件实例，重置值的同时重置控件校验状态即可：

1. 组件类导入必要装饰器和类型

import { ViewChild } from '@angular/core';
import { NgControl } from '@angular/forms';

2. 组件类中声明模板引用绑定

@ViewChild('selectDropdown') selectDropdown: NgControl;

3. 修改getPublicBankInfo重置逻辑

getPublicBankInfo(info) {
    // 重置第二个下拉框绑定值
    this.reservelocker.locker = '';
    // 重置表单控件校验状态
    this.selectDropdown.control.reset();
    // 可选：标记控件为未触碰、未修改状态，完全清空交互状态
    this.selectDropdown.control.markAsPristine();
    this.selectDropdown.control.markAsUntouched();
    console.log(info);
}

如果你使用的是响应式表单，不需要声明模板引用，直接通过FormGroup拿到对应控件实例调用reset()方法即可，效果一致。

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