如何在AngularJS中的初始加载时将表单错误消息保留为空白

Question

我正在尝试学习AngularJS 1.x中的表单。但是我有错误消息，它在第一次加载时总是打开。如何开发行为，使得它们在加载时为空白，如果没有输入字段，则仅在提交后为红色？似乎是一些我必须使用内置指令的状态。

所有元素都相似，所以让我们把这一点拆开。此外，如果收音机和下拉列表不同，我们也可以讨论。

<p>First Name:<input type="text" id="firstName" ng-model="firstName" required/>
    <span style="background-color: red" ng-if="identification.firstName.$error.required">The first name is required.</span>
</p>

我是否用||链接了一些指令或者＆amp;＆amp; ？

我的目标是

1. 如何在加载时关闭错误消息？
2. 当我点击提交，并且字段为空时，是否会激活css红色错误消息？
3. 我希望在没有重新加载的情况下填写表单时清除错误消息。

是的，所以任何提示都非常感谢。不一定非常漂亮

由于

<小时/> 更新1

gist of current code

我接受了它。在这一点上仍然真的是一团糟。不知道如何使用submit来测试每个字段，然后显示错误消息，如果为空。对于现场状态的测试，似乎也有很多重复。有没有更好的方法来打破这种逻辑？ Ugggghhhhh

更新2

这个很奇怪，表单现在所有文本框都没有按钮或复选框！？但HTML没有改变。叹气

Answer 1

    ng-if="identification.firstName.$error.required && !$pristine"

在$ pristine和$ dirty validator上搜索更多内容

Answer 2

您可以向ng-if添加一些其他属性，并仅在提交表单时将其值设置为true。

你的html中的

添加了这个新属性

<p>First Name:<input type="text" id="firstName" ng-model="firstName" required/>
    <span style="background-color: red" ng-if="identification.firstName.$error.required && running">The first name is required.</span>
</p>

控制器中的

在提交表单时将此属性设置为true

$scope.submit = function(){
    $scope.running = true;
    ...
}