使用 Angular 提交表单时更改类并显示消息

Question

我正在使用 ngMessages 通过我的表单验证显示错误消息，这是有效的。

现在我的问题是，当我提交表单时，我想将类从有效（绿色边框）更改为正常状态，这只是输入上的 css。此外，如果所有字段都有效，则应在表单上方显示一条文本消息，表明表单已发送，但它似乎不适用于 $valid。

几秒钟后消息消失。

Plunker

我的代码

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/角度

<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>

Answer 1

更新

恐怕你不能直接做你需要的，因为如果你改变条件，有两种状态会相互冲突：

用户正确填写表单并提交 VS 用户按提交，然后正确填写字段

在第二种情况中，该字段不会显示valid-field绿色边框。

---

您应该做一个检查有效字段的函数，并在提交时执行它，然后在true 上为您的表单上的一个全局类设置一个标志，这将覆盖您当前的valid/invalid states

Here 是可行的解决方案

//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;
}

之前的错误答案：

只需在valid-field 类上添加!$submitted 条件

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}"

Answer 2

使用以下代码可以正常工作，但您需要编写 css 类，例如：

    .initial
   {
     1px solid darkgray;  
   }   

并将以下 html 用于您的 ng-class 输入元素。

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

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

最后我为“您的消息已发送！”你需要写的消息

     <div ng-messages="contactForm.$valid" ng-if="contactForm.$submitted && contactForm.$valid">

       <span class="sent">Your message has been sent!</span>

   </div>