Angular5模板驱动表单自定义验证后无法重置验证错误

我来帮你搞定这个问题——你遇到的核心问题是自定义验证器逻辑不完整，加上表单重置的调用方式不够规范，导致重置后验证错误状态残留。下面一步步给你解决：

1. 修复自定义验证器的逻辑漏洞 #

你的RequiredFieldDirective在控件值为null或undefined时没有返回任何验证结果，这就导致表单重置后，之前的错误状态无法被清除。修改验证器，确保无论控件值是什么，都能返回明确的验证结果：

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';

@Directive({
  selector: '[requiredField][ngModel]',
  providers: [{ provide: NG_VALIDATORS, useExisting: RequiredFieldDirective, multi: true }]
})
export class RequiredFieldDirective implements Validator {
  validate(c: AbstractControl): {[key: string]: any} {
    // 统一处理null/undefined和空字符串的情况
    const trimmedValue = c.value?.toString().trim() || '';
    // 如果处理后为空，返回错误；否则返回null（验证通过）
    return trimmedValue === '' ? { "requiredField": true } : null;
  }
}

2. 规范表单重置的调用方式 #

在Angular 5的模板驱动表单中，只需要调用NgForm的reset()方法，就能同时重置控件值和所有验证状态（包括pristine、touched、errors等）。你之前重复调用多个重置方法反而可能导致状态混乱，按下面的方式修改：

首先确保模板中的表单标签正确绑定模板引用变量：

<form #dashboardForm="ngForm">
  <!-- 你的输入控件 -->
  <input class="{{dashboardNameInput1.invalid && dashboardNameInput1.pristine && isFormInValid?'text-field-dashboard-inValidInput':'text-field-dashboard'}}" 
         name="dashboardName" 
         autocomplete="false" 
         type="text" 
         i18n-placeholder 
         placeholder="Dashboard Name" 
         [ngModel]="dashboard?.dashboardName" 
         maxlength="255" 
         required 
         requiredField 
         #dashboardNameInput1="ngModel" />
  
  <!-- 错误提示 -->
  <br>
  <span class="errorMessageDashboard" i18n *ngIf="dashboardNameInput1.errors?.requiredField && (dashboardNameInput1.touched || !dashboardForm.pristine)">
    Please Enter Dashboard Name.
  </span>
  <span class="errorMessageDashboard" [hidden]="dashboardNameInput1.valid || (dashboardNameInput1.pristine && !controlVariable?.dashboardName?.invalid)">
    <span i18n *ngIf="dashboardNameInput1.errors?.required && (dashboardNameInput1.touched || !dashboardForm.pristine)">
      Please Enter Dashboard Name.
    </span>
  </span>

  <!-- 按钮 -->
  <button *ngIf="!editModeDashboardName" class="button-style-08" (click)="updateDashboardName()" i18n>Add</button>
</form>

然后在组件类中简化重置逻辑：

import { ViewChild, NgForm } from '@angular/core';

// ...

@ViewChild('dashboardForm') dashboardForm: NgForm;

updateDashboardName() {
  // 重置表单：恢复控件初始值，同时清空所有验证状态
  this.dashboardForm.reset();

  // 如果你需要重置为特定值（比如空字符串），可以传入对象：
  // this.dashboardForm.reset({
  //   dashboardName: ''
  // });
}

3. 优化错误提示的显示逻辑 #

我还帮你调整了错误提示的*ngIf条件——只有当控件被触摸过（touched），或者表单已经被提交过（!dashboardForm.pristine）时才显示错误。这样表单重置后，控件回到pristine状态，错误提示会自动隐藏，更符合用户体验。

为什么之前的方法没用？ #

• 你的自定义验证器在值为null时没有返回结果，导致旧的错误状态无法被覆盖；
• 重复调用reset()和resetForm()反而可能导致表单状态混乱；
• 错误提示的条件没有考虑表单重置后的pristine状态，所以错误会一直显示。

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