Form Validation is not working in angularJs?

Question

I am unable to find the error in AngularJS Form validation.

JavaScript:

sidemenu.controller('galleryCtrl', ['$scope', '$rootScope', 'PropertyDetails', '$window', '$location', '$routeParams', 'allServices', 'customVariables', '$mdDialog', function (a, b, p, $window, l, r, e, cust, md) {
  var vm = this;
  a.imageSlide = true;
  vm.user = {
    first_name: "",
    email_id: "",
    selected_id: "",
    phone: ""
  };
}]);

HTML:

<form name="register_form" novalidate="">
    <div class="form-group">
        <label>firstName{{register_form.first_name.$pristine}}</label>
        <input type="text" name="first_name" placeholder="First Name" ng-model="user.first_name" ng-required="true">
        <p ng-show="register_form.user_first_name.$invalid && !register_form.user_first_name.$pristine" class="help-block">You name is required.</p>
    </div>
    <div class="col-xs-12">
        <button type="button" ng-disabled="((!user.phone) || (!user.selected_id))" ng-click="vm.raiseEnquiry(user,selected_id)" class="sell-btn btn-action btn btn-block hpl-btn btn-default">Raise Enquiry</button>
    </div>
</form> 

I am trying to print this line in above html code is {{register_form.first_name.$pristine}} not printing anything. So I am unable to find that what is the error in this.

Answer 1

There is a simpler solution to find the form error. You can just add to your html code:

<p>{{ register_form.$error }}<p>

Secondly you shouldn't use the $invalid for the first name input but you should use register_form.user_first_name.$error.required .

You can also read the documentation for angular forms at https://docs.angularjs.org/guide/forms

Hope it helps!

Br

Answer 2

Well you have several problems in your data binding.

1. You should edit the ng-model in your input to match the model in your Controller . You have ng-model="user.first_name" in your HTML while in your Controller you have an object named vm.user .

   So you should change :

    ng-model="user.first_name" 

   To:

    ng-model="vm.user.first_name" 

2. Second problem is that you are using name="first_name" in your input while you are referring to it later with register_form.user_first_name in the ng-show of your message.

   You should change it to:

    ng-show="register_form.first_name.$invalid && !register_form.first_name.$pristine" 

And to print the user name in your HTML you should refer to model object instead of form input , so you need to change the label from:

<label>firstName{{register_form.first_name.$pristine}}</label>

To the following:

<label>firstName {{vm.user.first_name}}</label>

Answer 3

Change with data-ng-model value

<p ng-show="register_form.first_name.$invalid && !register_form.first_name.$pristine" class="help-block">You name is required.</p>

you should put this also data-ng-disabled="register_form.$invalid"