Angular表单验证：ngModel的valid参数恒为true的原因及替代方案

为什么firstName.valid始终返回true？ #

你遇到的核心问题是没有给firstName输入框绑定任何验证规则。在Angular模板驱动表单中，默认的ngModel控件不会自带验证逻辑——从你提供的控制台日志里能看到_rawValidators: []和validator: null，这就证明这个控件完全没有验证器，所以无论输入内容是空还是有值，它的valid状态都会一直是true。

要解决这个问题，只需要给input添加required属性，Angular会自动为这个控件绑定内置的必填验证器：

<input ngModel name='firstName' #firstName='ngModel' (change)='log(firstName)' id="firstName" type="text" class="form-control" required>

添加后，当输入框为空且被触摸（touched）时，firstName.valid就会变为false，对应的错误提示也会正常显示。

能否通过firstName.value == ""实现必填验证？ #

可以实现基础的必填提示效果，比如修改错误提示的判断条件：

<div class='alert alert-danger' *ngIf='firstName.touched && firstName.value === ""'>First Name is Required</div>

但这种方式并不推荐，原因如下：

• 不符合Angular表单验证的规范：内置验证器会自动维护控件的errors对象（比如firstName.errors?.required），方便统一管理和展示错误信息；
• 扩展性差：如果后续需要添加其他验证规则（如最小长度、正则匹配），手动判断值的方式会变得臃肿且难以维护；
• 无法完美适配表单状态系统：内置验证器会自动同步dirty、pristine等表单状态，让验证逻辑更贴合用户交互场景。

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