Angular form validation $pristine not working properly - angularjs

Question

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

Answer 1

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>

Answer 2

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.