本文深入探讨了在 angular 15 应用中，单选按钮（radio buttons）的必填验证消息无法正确显示的问题。核心原因在于 `touched` 状态与 `required` 验证器的结合方式。文章提供了两种解决方案：一是调整验证条件的判断逻辑，移除 `touched` 状态的限制；二是为单选按钮组设置默认选中值，从而避免必填验证错误。
Angular 表单验证状态概述
在深入探讨单选按钮的特定问题之前，我们首先回顾一下 Angular 模板驱动表单（或响应式表单）中几个关键的控件状态：
- valid: 如果控件的值通过了所有验证规则，则为 true。
- invalid: 如果控件的值未能通过任何验证规则，则为 true。
- touched: 如果用户已经与控件进行了交互（例如，点击或离开输入框），则为 true。
- untouched: 如果用户尚未与控件进行交互，则为 true。
- dirty: 如果控件的值自初始加载以来已被更改，则为 true。
- pristine: 如果控件的值自初始加载以来未被更改，则为 true。
- errors: 一个对象，包含当前控件的所有验证错误。例如，errors?.['required'] 表示存在必填错误。
这些状态通常用于控制何时显示验证错误消息，以提供良好的用户体验。例如，我们通常希望在用户与输入框交互（touched）并且输入框无效（invalid）时才显示错误。
单选按钮必填验证消息不显示的原因
在 Angular 应用中，当为单选按钮组设置 required 验证器时，如果初始状态下没有选中任何选项，该控件将处于 invalid 状态。然而，如果验证消息的显示条件同时包含了 touched 状态，例如：
You must pick a gender
这里的问题在于，对于一个初始未选中的必填单选按钮组，emp_gender.touched 状态可能永远不会变为 true，除非用户实际点击了其中一个单选按钮。一旦用户点击了其中一个按钮，该按钮组就有了选中值，此时 required 错误就消失了，即使 touched 变为 true，emp_gender.errors?.['required'] 也将为 false。因此，整个 *ngIf 条件将永远无法满足，导致必填错误消息无法显示。
提交按钮的 [disabled]="!employeeForm.valid" 属性会正确地禁用按钮，因为表单整体是 invalid 的，但这并不能解决错误消息不显示的问题。
解决方案一：调整验证条件的判断逻辑
最直接的解决方案是修改错误消息的显示条件，使其不再依赖于 touched 状态，或者以更合理的方式结合 touched 状态。对于 required 验证器，如果表单一开始就是无效的，我们可能希望立即显示错误，或者至少在用户尝试提交表单时显示。
考虑到 required 验证的特性，我们可以直接检查是否存在 required 错误：
You must pick a gender
解释： 移除 emp_gender.touched 后，只要 emp_gender 控件处于 invalid 状态且存在 required 错误，错误消息就会显示。这使得必填错误消息在表单初始加载且未选择任何项时即可见，或者在用户尝试提交表单时（如果表单提交后触发了验证显示逻辑）可见。
如果希望错误消息在用户与表单交互后才显示，可以考虑结合 employeeForm.submitted 或其他全局表单状态。但在本例中，对于必填的单选按钮，直接显示 required 错误更为直观。
解决方案二：设置默认选中值
另一种避免必填验证错误的方法是为单选按钮组设置一个默认选中值。这样，表单在加载时就已经是有效的，无需用户额外操作。
在 employee-form.component.ts 中，为 gender 属性设置一个初始值：
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Employee } from '../../models/empModel';
import { EmployeeService } from '../../services/employee.service';
import { HttpErrorResponse } from '@angular/common/http';
@Component({
selector: 'app-employee-form',
templateUrl: './employee-form.component.html',
styleUrls: ['./employee-form.component.scss']
})
export class EmployeeFormComponent {
constructor(private employeeService: EmployeeService) {
// 假设 deptno 也有类似问题，这里一并处理
this.deptno = -1; // 原始代码中已有
this.gender = 'male'; // 设置默认性别为 'male'
}
public empsArray: Employee[] = [];
public newEmployee: any = {}
public empno: number = 0;
public deptno: number = 0;
public firstname: string = '';
public lastname: string = '';
public gender: string = 'male'; // 初始化为 'male'
public avatar: string = '';
public job: string = '';
public bio: string = '';
public skills: string = '';
public isSuccess: boolean = false;
// ... 其他方法保持不变
}解释： 通过在组件的构造函数或属性初始化时将 gender 变量设置为 'male' (或 'femele')，相应的单选按钮在表单加载时就会被选中。这样，gender 控件将不再处于 invalid 状态，required 错误自然也不会发生。
注意事项与最佳实践
-
用户体验考虑：
-
何时显示错误？ 决定何时显示验证消息是关键。常见的策略包括：
- touched 和 invalid： 用户离开输入框后如果无效，则显示。
- dirty 和 invalid： 用户修改输入框后如果无效，则显示。
- submitted 和 invalid： 用户点击提交按钮后，如果表单无效，则显示所有错误。
- 对于 required 验证，尤其是在单选按钮组这种用户必须做出选择的场景，直接显示错误（如解决方案一）可能更清晰，或者通过默认值（如解决方案二）避免错误。
-
何时显示错误？ 决定何时显示验证消息是关键。常见的策略包括：
-
name 属性的重要性：
- 确保单选按钮组中的所有 input type="radio" 元素都具有相同的 name 属性（例如 name="gender"）。这是浏览器和 Angular 将它们识别为同一组的关键。
-
模板引用变量的范围：
- 在本例中，#emp_gender="ngModel" 引用的是 gender 这个 ngModel 实例，它代表了整个单选按钮组的验证状态，而不是单个单选按钮。这是正确的用法。
-
部门选择器的问题：
- 原始代码中部门选择器 select 也有类似问题：*ngIf="emp_department.touched && emp_department.value == -1"。如果 -1 是一个无效的默认值，并且用户没有交互，那么 touched 同样可能阻止错误显示。可以考虑将其改为 *ngIf="(emp_department.touched || employeeForm.submitted) && emp_department.value == -1"，或者直接在 employee-form.component.ts 中将 deptno 默认值设置为一个有效部门，或者在模板中移除 selected 属性，让用户强制选择。
总结
Angular 模板驱动表单中的单选按钮 required 验证消息不显示，通常是由于 touched 状态的判断逻辑与 required 验证器在特定场景下不兼容所致。通过调整 *ngIf 条件，移除对 touched 状态的依赖，或者为单选按钮组提供一个默认选中值，可以有效地解决这一问题。在实际开发中，应根据具体的业务需求和用户体验目标，选择最合适的验证消息显示策略。
