Angularjs 消息：在表单提交时验证

这里有一个带有ngMessage验证的表单。这就是我想要实现的目标：

• 向用户显示表单时，不应显示任何错误消息
• 在模糊时，如果字段有错误，则应显示消息
• 提交表单时，如果有任何字段有错误，则应显示错误消息

在plunk中，我有两个问题：（1）最初显示表单时会显示消息；（2）当没有错误消息且用户单击按钮时，表单不会提交。代码怎么了

HTML

---

您需要使用诸如ng if之类的条件显示验证消息

HTML:

并将ng submit从按钮移动到表单标签，如：

<form name="myForm" novalidate ng-submit="submitForm()">

---

基于Kwarc的anwser，这里有一点改进，因为您可以避免使用

$scope

变量来知道表单是否已提交。它还可以确保在错误消息显示上有更好的表现

HTML:

myForm.$submitted

将自动设置为true

最后，在表单标签上应用相同的表单提交方法：

<form name="myForm" novalidate ng-submit="submitForm()">

---

对于我来说，如果表单的$submitted状态（示例为barebones），在ng中使用它就足够了：

//和在提交btn中
scope.submit=函数（）{
scope.myForm.$setSubmitted（）；
if（scope.myForm.$valid）{
//做点什么
}
}

---

如果我只在

$toucted

<div ng-if="submitted || myForm.myName.$dirty" 
    ng-messages="myForm.myName.$error" style="color:red" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
</div>

$scope.submitForm = function() {
    $scope.submitted = true;
    if (myForm.$valid) {
        alert('Form submitted - fields passed validation');
    }
};  

<form name="myForm" novalidate ng-submit="submitForm()">

<div ng-if="myForm.myName.$invalid && (myForm.$submitted || myForm.myName.$touched)" 
   ng-messages="myForm.myName.$error" style="color:red" role="alert">
   <div ng-message="required">You did not enter a field</div>
   <div ng-message="minlength">Your field is too short</div>
   <div ng-message="maxlength">Your field is too long</div>
</div>

$scope.submitForm = function() {
   if (myForm.$valid) {
       alert('Form submitted - fields passed validation');
   }
};  

<form name="myForm" novalidate ng-submit="submitForm()">