我们可以为每个表单元素的每个验证的规则自定义错误的提示信息。在这个 email 元素的下面，我们先给 required 这个规则添加一个自定义的错误提示，当用户没有在这个字段里面输入内容的时候，会显示这个错误提示。

这个错误信息可以放到一个段落标签里面，在这个标签上可以使用两个 bootstrap 框架提供的 css 类，给它添加点样式 ... alert 还有 alert-danger

p.alert.alert-danger

要显示的错误提示是 email 字段是必须项 ... 现在这个错误提示会一直显示在页面上，我们需要让它在特定的条件下显示 ... 可以使用 ng-if ，ng-show 或者 ng-hide 这些指令 ... 这里我用一个 ng-if ...

它的值如果算出来的结果是 true 的话，才会显示这个元素 ... 我们把它的值设置成 userForm.userEmail.$error.required ... 如果 userEmail 这个字段的 required 验证规则验证失败的话，它的 $error 里面的 required 属性的值就会是 true ... 这样也就会显示这个错误提示 ...

<p class="alert alert-danger"
ng-if="userForm.userEmail.$error.required">
email 字段是必填项
</p>

保存 ... 在页面上会显示这个错误提示，因为我们还没有在这个字段里面输入内容 ... 在这个字段里输入点东西 ... 这样就不会在显示错误提示了 ...

这里我们可以再改进一下这个错误提示的显示 .. 比如我们想让这个错误提示在提交表单的时候，如果没有填写这个字段的内容，才显示出来 ... 或者，只有在动过这个字段以后，如果没有填写内容才显示这个错误 ...

在这个错误提示信息的周围，再用一组标签包装一下它 ... (ctrl + w)，然后在这个标签上，再用一个 ng-if ... 显示这个元素的条件是 userForm.userEmail.$touched ... 它的意思是只有在动过这个 email 表单元素以后，才显示这个 div 元素里的内容 ...

后面加上两条竖线，表示 or ，也就是或者的意思 ... 再用一个条件 ... userForm.$submitted .. 提交表单以后，这个 $submitted 的值会变成 true ...

<div ng-if="userForm.userEmail.$touched || userForm.$submitted">
<p class="alert alert-danger"
ng-if="userForm.userEmail.$error.required">
email 字段是必填项
</p>
</div>

保存 ... 再到浏览器上看一下 .. 现在没有显示任何的错误 ... 点一下这个 email 字段 ... 然后再离开 ... 这样就会显示出这个提示，email 字段是必填项 .. 因为我们没有填写这个字段，同时也动过这个字段 ... 满足这两个条件就会显示这个错误提示 ...

再刷新一下 ... 然后再选中这个字段 ... 不填写内容 ... 按一下回车提交这个表单 ... 这样也会显示这个错误提示 ...