Question

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

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

几秒钟后消息消失。

我的代码

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上为表单上的全局类设置一个标记，该标记将覆盖当前的{{1} } /无效状态

Here是可行的解决方案

valid

//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; }类~~上添加!$submitted条件

~~valid-field~~

Answer 2

使用下面的代码它可以正常工作，但你需要写的是css类，如：

DefaultTableModel

并使用以下html表示输入元素的ng-class。

    .initial
   {
     1px solid darkgray;  
   }

最后我为＆＃34;你的消息已被发送！＆＃34;你需要写的消息

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

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

2 个答案: