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

Posted 2023-03-05

【中文标题】使用 Angular 提交表单时更改类并显示消息

【英文标题】：Change classes and display message when form is submitted with Angular

【发布时间】：2015-07-10 05:39:47

【问题描述】：

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

【问题讨论】：

做一个笨蛋。这对您和我们都会很有帮助。

我会在一分钟内用 plunker 编辑我的问题。

【参考方案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"

【讨论】：

当我将它添加到我的 plunker 时，边框从绿色变为红色

对不起，我会修复答案

【参考方案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>

【讨论】：

我已经过验证并且工作正常。但你应该知道的一件事是有任何 .

这个解决方案有缺陷，如果用户按提交，没有输入任何内容，然后正确填写字段，不会显示绿色边框