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.

does my answer fit your needs ?

cнŝdk
– cнŝdk

2017-04-01 15:44:17 +00:00
Commented Apr 1, 2017 at 15:44 — cнŝdk
– cнŝdk, Commented Apr 1, 2017 at 15:44

hrdkisback · Accepted Answer · 2017-03-24 13:33:23Z

1

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"

answered Mar 24, 2017 at 13:33

hrdkisback

9088 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

josephpedro · Accepted Answer · 2017-03-24 13:26:48Z

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

answered Mar 24, 2017 at 13:26

josephpedro

411 silver badge6 bronze badges

Comments

cнŝdk · Accepted Answer · 2017-03-24 14:35:28Z

Well you have several problems in your data binding.

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

Collectives™ on Stack Overflow

Form Validation is not working in angularJs?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related