我使用ngMessages与我的表单验证显示错误消息，这是工作。

现在我的问题是，当我提交表单我想从有效（绿框）改变类为正常状态，这是对刚刚投入CSS。此外，如果所有的字段都有效的文本消息应显示上述表单，表单已经发出，但它似乎并没有与$有效的合作。

几秒钟后，信息消失。

Plunker

我的code

CSS

 输入{    背景色：#FFF;    边框：1px的固体深灰;    的margin-top：20px的;    宽度：400像素;    高度：×45像素;    填充：0 10px的;}。无效场{    边框：1px的固体红色​​;}.valid场{    边框：1px的固体绿色;}.error {    颜色：红色;}.sent {    颜色：绿色;} 

HTML /角

 ＆LT;形成NOVALIDATE NAME =联系形式＆GT;    ＆LT; D​​IV NG的消息=$联系形式有效的NG-IF =$联系形式提交＆GT;        ＆LT; D​​IV NG消息=有效＆GT;            ＆LT;跨度类=发送＆GT;您的邮件已发送＆LT;！/ SPAN＆GT;        ＆LT; / DIV＆GT;    ＆LT; / DIV＆GT;    ＆LT;输入纳克级={'无效场：。contactForm.nameField $感动||联系形式提交$，有效的场'：contactForm.nameField $有效}        TYPE =文本名称=名称字段占位符=全名*        NG-模式=联系人姓名        MINLENGTH个=2        需要＆GT;    ＆LT; D​​IV NG的消息=。contactForm.nameField $错误NG-IF =$联系形式提交|| contactForm.nameField $感动。＆GT;        ＆LT; D​​IV NG消息=需要＆GT;            ＆LT;跨度类=错误＆GT;名称是必需的＆LT; / SPAN＆GT;        ＆LT; / DIV＆GT;        ＆LT; D​​IV NG消息=MINLENGTH个＆GT;            ＆LT;跨度类=错误＆GT;名称必须是长及保持2字符; / SPAN＆GT;        ＆LT; / DIV＆GT;    ＆LT; / DIV＆GT;    ＆LT;输入纳克级={'无效场：。contactForm.emailField $感动||联系形式提交$，有效的场'：contactForm.emailField $有效}        键入=电子邮件NAME =emailField占位符=电子邮件*        NG-模式=contactEmail        需要＆GT;    ＆LT; D​​IV NG的消息=。contactForm.emailField $错误NG-IF =$联系形式提交|| contactForm.emailField $感动。＆GT;        ＆LT; D​​IV NG消息=需要＆GT;＆LT;跨度类=错误＆GT;电子邮件是必需的＆LT; / SPAN＆GT;＆LT; / DIV＆GT;        ＆LT; D​​IV NG消息=电子邮件＆GT;＆LT;跨度类=错误＆GT;电子邮件无效＆LT; / SPAN＆GT;＆LT; / DIV＆GT;    ＆LT; / DIV＆GT;    ＆LT;按钮类=送-BTN类型=提交＆GT;发送表单＆LT; /按钮＆GT;＆LT; /表及GT; 

解决方案

更新

我怕你不能做，你直接需要的东西，因为如果你改变的条件有2个国家将互相冲突：

的用户正确填写表单并提交的VS的用户preSS提交，然后正确填写一个字段的

在第二个案例字段不会显示有效场绿色边框。

你应该做的是做哪些检查的有效字段功能，并执行它提交，然后设置一个标志上真正一类的形式对全球这将覆盖您当前的有效 /无效状态

这里是工作液

  //验证美国$ scope.validateSuccessSubmit =功能（）{      如果（$ scope.contactForm.nameField $有效和放大器;＆安培;        。$ scope.contactForm.emailField $有效和放大器;＆安培;          $ scope.contactForm。$提交）{            $ scope.formCompleted =真;          }    }; 

 ＆LT;！ - 表 - ＆GT;    ＆LT;形成NOVALIDATE NAME =联系形式NG-CLASS ={'的形式完成的'：formCompleted}＆GT; 

  / * *的CSS /.FORM完成的输入{  边框：1px的固体深灰;} 

的 previous不正确的答案：的

只需添加！$提交在有效场类条件

 纳克级={'无效场：。contactForm.nameField $感动||联系形式提交$，'有效场：contactForm.nameField $有效和放大器;＆安培; ！联系形式。$}提交//和NG-CLASS ={'无效场：。contactForm.emailField $感动||联系形式提交$， '有效场：contactForm.emailField $有效和放大器;＆安培; ！联系形式。$}提交 

I'm using ngMessages to display error messages with my form validation and this is working.

Now my problem is when I submit the form I want to change the classes from being valid (green border) to their normal state, which is just css on the inputs. Also if all the fields are valid a text message should display above the form that the form has been sent but it doesn't seem to be working with the $valid.

After a few seconds the message disappears.

Plunker

my code

css

input {
    background-color: #fff;
    border: 1px solid darkgray;
    margin-top: 20px;
    width: 400px;
    height: 45px;
    padding: 0 10px;

}
.invalid-field {
    border: 1px solid red;
}
.valid-field {
    border: 1px solid green;
}
.error {
    color: red;
}
.sent {
    color: green;   
}

html/angular

<form novalidate name="contactForm">
    <div ng-messages="contactForm.$valid" ng-if="contactForm.$submitted">
        <div ng-message="valid">
            <span class="sent">Your message has been sent!</span>
        </div>
    </div>

    <input ng-class="{'invalid-field': contactForm.nameField.$touched || contactForm.$submitted, 'valid-field': contactForm.nameField.$valid}" 
        type="text" name="nameField" placeholder="Full name*"
        ng-model="contactName"
        minlength="2"
        required >
    <div ng-messages="contactForm.nameField.$error" ng-if="contactForm.$submitted || contactForm.nameField.$touched">
        <div ng-message="required">
            <span class="error">Name is required</span>
        </div>
        <div ng-message="minlength">
            <span class="error">Name must be 2 characters long</span>
        </div>
    </div>

    <input ng-class="{'invalid-field': contactForm.emailField.$touched || contactForm.$submitted, 'valid-field': contactForm.emailField.$valid}"
        type="email" name="emailField" placeholder="Email*"
        ng-model="contactEmail"
        required>
    <div ng-messages="contactForm.emailField.$error" ng-if="contactForm.$submitted || contactForm.emailField.$touched">
        <div ng-message="required"><span class="error">Email is required</span></div>
        <div ng-message="email"><span class="error">Email is not valid</span></div>
    </div>

    <button class="send-btn" type="submit">Send form</button>
</form>

Update

I'm afraid that you can't do what you need directly, because if you change the conditional there are 2 states which will conflict with each other:

The user fills the form correctly and submits VS The user press Submit, then fills a field correctly

In the second case the field won't be show the valid-field green border.

What you should do is make a function which checks the valid fields, and execute it on the submit, then set a flag on true for a class global on your form which will override your current valid/invalid states

Here is the working solution

//Validate States
$scope.validateSuccessSubmit = function(){
      if($scope.contactForm.nameField.$valid && 
        $scope.contactForm.emailField.$valid &&
          $scope.contactForm.$submitted) {
            $scope.formCompleted = true;
          }

    };

<!-- Form -->
    <form novalidate name="contactForm" ng-class="{'form-completed' : formCompleted}">

/*CSS*/
.form-completed input{
  border: 1px solid darkgray;
}

Previous incorrect answer:

Just add the !$submitted condition on the valid-field class

ng-class="{'invalid-field': contactForm.nameField.$touched || contactForm.$submitted, 
'valid-field': contactForm.nameField.$valid && !contactForm.$submitted}" 

//And 

ng-class="{'invalid-field': contactForm.emailField.$touched || contactForm.$submitted,
 'valid-field': contactForm.emailField.$valid  && !contactForm.$submitted}"