Change classes and display message when form is su

问题:

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>

回答1:

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

回答2:

Use the following code it will work fine but what you need to is write css class like:

    .initial
   {
     1px solid darkgray;  
   }   

and use the following html for ng-class of you input elements.

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

And finally I for the "Your message has been sent!" message you need to write

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

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

   </div>