如何重置mat-autocomplete已选项？响应式表单重置无效问题

针对你遇到的mat-autocomplete字段在表单重置后仍处于INVALID状态的问题，可通过以下几种方式解决：

1. 手动同步控件值与视图状态 #

form.reset()有时无法完全同步mat-autocomplete的视图层，需要单独处理目标控件，确保值和验证状态都被重置：

resetForm() {
  this.loanSearchForm.reset();
  // 重置state控件值为null，避免视图残留内容
  const stateControl = this.loanSearchForm.get('state');
  if (stateControl) {
    stateControl.setValue(null, { emitEvent: false });
    // 标记控件为未修改、未触碰，清除验证状态
    stateControl.markAsPristine();
    stateControl.markAsUntouched();
    // 强制更新验证状态
    stateControl.updateValueAndValidity({ emitEvent: false });
  }
}

2. 调整自定义验证器逻辑 #

你的错误提示来自forbiddenValues验证器，说明重置后该验证器仍判定值不合法。需修改验证器，允许空值/Null通过验证：
假设你的验证器原本是这样：

forbiddenValuesValidator(validOptions: any[]) {
  return (control: AbstractControl): ValidationErrors | null => {
    const isValueValid = validOptions.some(opt => opt.itemCd === control.value);
    return isValueValid ? null : { forbiddenValues: true };
  };
}

修改为：

forbiddenValuesValidator(validOptions: any[]) {
  return (control: AbstractControl): ValidationErrors | null => {
    // 空值或Null时跳过验证，不返回错误
    if (!control.value) return null;
    const isValueValid = validOptions.some(opt => opt.itemCd === control.value);
    return isValueValid ? null : { forbiddenValues: true };
  };
}

3. 重置时指定字段默认值 #

在调用reset()时显式设置state字段的默认值，确保表单和视图同步：

resetForm() {
  this.loanSearchForm.reset({
    state: ''
    // 其他表单字段可按需设置默认值
  });
}

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