Angular响应式表单邮箱输入框校验状态与样式不匹配问题排查

兄弟，我帮你捋捋你遇到的这几个问题哈！

1. 邮箱校验逻辑的核心问题 #

你现在给email字段的FormControl只配置了Validators.required，这意味着只有当邮箱为空时才会触发无效状态，如果用户输入了一串不符合邮箱格式的内容（比如abc），这个校验是不会生效的——因为你没加邮箱格式校验器啊！

解决办法很简单，把邮箱的校验规则补上Validators.email就可以了，修改后的代码片段如下：

email: new FormControl(null, [Validators.required, Validators.email]),

这样既会校验邮箱是否必填，也会校验输入内容是否符合邮箱格式规范。

2. 为什么修改input的type为text没用？ #

Angular响应式表单的校验完全是基于你在FormControl里配置的校验规则，和input的type属性没有直接关系。就算你把type改成text，只要FormControl的校验规则没变化，表单的状态就不会改变，所以这个操作其实对校验结果没有任何影响哦。

3. CSS样式不匹配的原因及解决 #

你提到的颜色和CSS不匹配，大概率是因为你用了原生的:invalid伪类来设置样式，但Angular的表单控件会自动添加专属的状态类（比如ng-invalid、ng-touched、ng-dirty这些）。

举个例子，如果你想在用户触碰过输入框且输入内容无效时显示红色边框，正确的CSS写法应该是：

.form-control.ng-invalid.ng-touched {
  border-color: red;
  color: red;
}

要是你用原生的:invalid伪类，很可能会和Angular的表单状态冲突，因为原生invalid状态是基于HTML5的原生校验，而我们用的是Angular响应式表单的校验逻辑，所以必须用Angular提供的状态类来编写样式才能匹配上。

备注：内容来源于stack exchange，提问作者mohammadreza Faramarzi