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

我正在使用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>

解决方法

更新

我担心你不能直接做你需要的东西,因为如果你改变条件,就会有两种状态会相互冲突：

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

在第二种情况下,该字段将不显示有效字段绿色边框.

你应该做的是创建一个检查有效字段的函数,并在submit上执行它,然后为表单上的全局类设置一个标志为true,这将覆盖当前的有效/无效状态

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

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

解决方法

相关推荐