CODEWITHSUNDEEP
angularjs
r3plica
r3plica

Reputation: 13367

Angular form validation $pristine not working properly

Can anyone tell me why my validation is being ignored? Here is my form:

<form name="contactForm" role="form" ng-submit="controller.submit()" novalidate>
    <div class="form-group" ng-class="{ 'has-error' : contactForm.fullName.$invalid && !contactForm.fullName.$pristine }">
        <input class="form-control" type="text" name="fullName" placeholder="Full name" ng-model="controller.model.fullName" required />
    </div>
    <div class="form-group" ng-class="{ 'has-error' : contactForm.email.$invalid && !contactForm.email.$pristine }">
        <input class="form-control" type="text" name="email" placeholder="Email address" ng-model="controller.model.email" required />
    </div>
    <div class="form-group" ng-class="{ 'has-error' : contactForm.phoneNumber.$invalid && !contactForm.phoneNumber.$pristine }">
        <input class="form-control" type="text" name="phoneNumber" placeholder="Phone number" ng-model="controller.model.phoneNumber" required />
    </div>
    <div class="form-group" ng-class="{ 'has-error' : contactForm.orderQuantity.$invalid && !contactForm.orderQuantity.$pristine }">
        <select class="form-control" name="orderQuantity" ng-model="controller.model.orderQuantity">
            <option disabled selected>Order quantity</option>
            <option>10+</option>
            <option>20+</option>
            <option>30+</option>
            <option>40+</option>
        </select>
    </div>
    <div class="form-group" ng-class="{ 'has-error' : contactForm.country.$invalid && !contactForm.country.$pristine }">
        <input class="form-control" type="text" name="country" placeholder="Country" ng-model="controller.model.country" required />
    </div>
    <div class="form-group">
        <textarea class="form-control" placeholder="Message" ng-model="controller.model.message"></textarea>
    </div>
    <div class="form-group">
        <div class="recaptcha" theme="dark" vc-recaptcha key="'6Lcc0AgTAAAAAIpcEqqDI3Ko8dZ05H-GGgUnfOvA'"></div>
    </div>
    <div class="form-group">
        <button class="btn btn-primary">Send</button>
    </div>
</form>

I set up a codepen here: http://codepen.io/r3plica/pen/XbzyzQ?editors=101

Upvotes: 0

Views: 4107

Answers (2)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

you should check whether form is submitted or not using contactForm.$submitted.

After form submission the formController object is get updated and various parameter of each controll's model are get updated and then you can validate your data.

you have not checked this in your form validation. The updated html is

<div class="container" ng-app="validationExample">
  <div class="row" ng-controller="ValidationController as controller">


    <form style="margin-top: 20px;" name="contactForm" role="form" ng-submit="controller.submit()" novalidate>
      <div class="form-group" ng-class="{ 'has-error' :  contactForm.fullName.$invalid && contactForm.$submitted }">
        <input class="form-control" type="text" name="fullName" placeholder="Full name" ng-model="controller.model.fullName" required />
      </div>
      <div class="form-group" ng-class="{ 'has-error' : contactForm.email.$invalid && contactForm.$submitted }">
        <input class="form-control" type="email" name="email" placeholder="Email address" ng-model="controller.model.email" required />
      </div>
      <div class="form-group" ng-class="{ 'has-error' : contactForm.phoneNumber.$invalid   && contactForm.$submitted }">
        <input class="form-control" type="tel" name="phoneNumber" placeholder="Phone number" ng-model="controller.model.phoneNumber" required />
      </div>
      <div class="form-group" ng-class="{ 'has-error' : contactForm.$submitted && contactForm.orderQuantity.$invalid && contactForm.orderQuantity.$error.required }">
        <select class="form-control"  required name="orderQuantity" ng-model="controller.model.orderQuantity"> 
          <option disabled selected>Order quantity</option>
          <option>10+</option>
          <option>20+</option>
          <option>30+</option>
          <option>40+</option>
        </select>
      </div>
      <div class="form-group" ng-class="{ 'has-error' : contactForm.country.$invalid && contactForm.$submitted}">
        <input class="form-control" type="text" name="country" placeholder="Country" ng-model="controller.model.country" required />
      </div>
      <div class="form-group">
        <textarea class="form-control" placeholder="Message" ng-model="controller.model.message"></textarea>
      </div>
      <div class="form-group">
        <button class="btn btn-primary" type="submit">Send</button>
      </div>
    </form>
  </div>
</div>

Here is the updated code codepen

Also instead of $invalid you can use required to validate the fields.Also you can use regular expression to put your custom validation rule.

e.g. 

   <input  name="first_name" class="form-control" required type="text" ng-model="NewUser.first_name"  ng-pattern="/^[A-Za-z]+[0-9]*$/" />
                    <span ng-show="newuser.first_name.$error.pattern">This is not valid <b>Last name</b></span>

Upvotes: 1

Joy
Joy

Reputation: 9550

Actually the validation is not ignored. In your codepen code, input whatever text and remove to empty. Then switch to another input element. The has-error class is added.

Because you are checking through $dirty, which is by default false if you do not alter any input text (https://docs.angularjs.org/api/ng/type/form.FormController):

$dirty boolean
True if user has already interacted with the form.

I added ng-minlength=5 to your code: http://codepen.io/anon/pen/xGPmqR:

<div class="form-group" ng-class="{ 'has-error' : contactForm.fullName.$invalid && contactForm.fullName.$dirty }">
    <input class="form-control" type="text" name="fullName" placeholder="Full name" ng-model="controller.model.fullName" required ng-minlength=5 />
</div>

As you input any text, the ng-minlength rules is working.

Upvotes: 0

Related Questions