Angular 14 NgForms内置与自定义验证器设置问题（无需FormBuilder）

你当前的问题出在提交时才添加验证器——这时候表单已经进入提交流程，Angular不会重新触发验证，自然不会显示错误提示。模板驱动表单的验证器需要在控件初始化阶段就绑定，而不是等到提交时才加。下面是具体的修复方案：

1. 给标题输入框加必填验证 #

最省事的方式：直接用模板属性 #

在HTML的title输入框里加required属性就行，Angular会自动对应Validators.required：

<input class="form-control" name="title" type="text"
       [ngModel]="" #title="ngModel" required
       placeholder="اسم المادة" />

你的错误提示逻辑不用改，只要formSubmitted为true且控件有required错误就会显示。

若要在TS中动态添加 #

在组件的ngAfterViewInit钩子（视图初始化后）里获取控件并绑定验证器，记得调用updateValueAndValidity()触发状态更新：

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

export class YourComponent implements AfterViewInit {
  @ViewChild('form') form!: NgForm;

  ngAfterViewInit(): void {
    this.form.controls['title'].addValidators(Validators.required);
    this.form.controls['title'].updateValueAndValidity();
  }

  // ... 其他代码
}

2. 给多选下拉框加自定义验证器 #

首先确保你的ValidateSelect验证器函数符合Angular规范，要检查多选框的数组值是否为空：

import { AbstractControl, ValidationErrors } from '@angular/forms';

export function ValidateSelect(control: AbstractControl): ValidationErrors | null {
  // 多选下拉框的value是数组，判断长度是否为0
  if (!control.value || control.value.length === 0) {
    return { requiredSelect: true };
  }
  return null;
}

同样在ngAfterViewInit里绑定这个验证器：

ngAfterViewInit(): void {
  // ... 上面的title验证代码
  this.form.controls['stageIds'].addValidators(ValidateSelect);
  this.form.controls['stageIds'].updateValueAndValidity();
}

3. 修正提交逻辑 #

现在验证器已经提前绑定，提交时只需先检查表单是否有效，无效就直接返回：

onFormSubmit(form: NgForm) {
  this.formSubmitted = true;

  // 表单无效就停止提交流程
  if (!form.valid) {
    return;
  }

  let newSubject: subject = new subject();
  newSubject.title = form.controls['title'].value;
  newSubject.stageIds = form.controls['stageIds'].value;
  newSubject.isActive = form.controls['isActive'].value;
  
  this.subjectService.addSubject(newSubject).subscribe(res => {
    if (res.status == 1) {
      this.route.navigateByUrl('subjects');
    }
  });
}

核心要点 #

• 提交时加验证器太晚，Angular不会重新跑验证流程。
• 绑定验证器后必须调用updateValueAndValidity()，否则控件状态不会更新。
• 多选下拉框的value是数组，自定义验证器要判断数组长度而非单纯的null/undefined。

内容的提问来源于stack exchange，提问作者b.g