Angular 9中如何通过FormGroup重置响应式表单的ng-select？

你遇到的核心问题是ng-select在控件值为undefined时会默认选中"undefined"选项，而且现有重置逻辑不仅没针对性处理这种情况，还存在判断逻辑的小问题（原代码里if (currentControl == null)的判断会导致只有控件不存在时才执行重置，这显然和你的需求相悖）。

下面给你一个原生JavaScript的临时解决方案，既能处理ng-select的undefined值问题，也能兼容其他表单控件：

Object.keys(this.myFormGroup.controls).forEach(key => {
  const currentControl = this.myFormGroup.controls[key];
  
  // 只处理存在的表单控件
  if (currentControl) {
    // 针对ng-select的特殊情况：值为undefined时重置为null
    if (currentControl.value === undefined) {
      // reset(null)会将控件值设为null，并同步重置状态（pristine、untouched等）
      currentControl.reset(null);
    } else {
      // 其他控件按正常逻辑重置
      currentControl.reset();
    }
  }
});

方案生效的原因 #

• ng-select对null和undefined的处理逻辑不同：当值为null时，它会回到未选中状态，不会渲染出"undefined"的选项；
• reset(null)比patchValue更彻底：它不仅设置控件值，还会重置控件的状态标记（比如清除touched、dirty），和表单原生的重置行为保持一致；
• 修正了原代码的判断逻辑：确保只有存在的控件才会被处理，避免触发空指针错误。

如果上述方案仍未生效，你可以尝试更直接的手动设置值+状态重置：

Object.keys(this.myFormGroup.controls).forEach(key => {
  const currentControl = this.myFormGroup.controls[key];
  
  if (currentControl) {
    if (currentControl.value === undefined) {
      // 直接设置值为null，关闭事件触发避免不必要的变更检测
      currentControl.setValue(null, { emitEvent: false });
      // 手动重置控件的 pristine/untouched 状态
      currentControl.markAsPristine();
      currentControl.markAsUntouched();
    } else {
      currentControl.reset();
    }
  }
});

这个方案完全基于原生Angular表单API和JavaScript，不需要额外依赖，应该能快速解决你加载错误条目时ng-select显示"undefined"的问题。

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