angularjs $valid not working on fields

Question

I am new to angularjs.

I have 2 buttons on my form and one is Save and other is Test Connection button.

<td align="left" colspan="0" >
    <input class="form-control" title="Specifies the IP address of the SIP trunk ethernet connection." placeholder="xxx.xxx.xxx.xxx"  
           style="display: inline-block;display:block;white-space: nowrap;overflow: hidden;" type="text" 
            name="pabxipaddress" id="pabxipaddress" ng-model="userSetup.pabxipaddress" required ng-pattern='patternPresent' >
</td>
<td>
    <span class="error" ng-show="(testIPOfficeFlag || submitted) && userSetupForm.pabxipaddress.$error.required">
        <label style="color: red;">Required!</label>
    </span>
    <span class="error" ng-show='(testIPOfficeFlag || submitted) && userSetupForm.pabxipaddress.$error.pattern'>
        <label style="color: red;">Invalid IP Address!</label>
    </span>
</td>

Now in my JS file when I do like, $scope.userSetup.pabxipaddress.$valid for some dynamic testing it gives me

TypeError: Cannot read property '$valid' of undefined

when I alert like $scope.userSetup.pabxipaddress it displays the data correctly.

How to check whether individual field is correct and passed all constraints attached to it.

I believe you need to name the form, and then check the validity of a field on the form object instead: $scope.myform.pabxipaddress.$valid — Joao Leal
– Joao Leal, Commented Nov 19, 2014 at 11:41
You need to use $scope.userSetupForm instead of $scope.userSetupForm — Satpal
– Satpal, Commented Nov 19, 2014 at 11:43
I already have the html code in <form name="userSetupForm" novalidate>. I don't want to do $scope.userSetupForm.$valid as it will give me for complete form instead I want to check validity of only three fields in my Test Connection button. — Jayesh
– Jayesh, Commented Nov 19, 2014 at 11:49

Arun P Johny · Accepted Answer · 2014-11-19 12:23:06Z

1

The valid property is not part of the model value... try

$scope.userSetupForm.postdail.$valid

where userSetupForm is the name of the form and postdail is the name of the input element.

var app = angular.module('my-app', [], function() {

})

app.controller('AppController', function($scope) {

  $scope.check = function() {
    $scope.validity = {
      field1: $scope.myform.myfield1.$valid,
      field2: $scope.myform.myfield2.$valid,
      field3: $scope.myform.myfield3.$valid
    }
  };
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app" ng-controller="AppController">
  <form name="myform" novalidate>
    <div>
      <input type="number" name="myfield1" ng-model="formdata.myfield1" required class="numbers-only-for" minvalue="1" maxvalue="45">
    </div>
    <div>
      <input type="text" name="myfield2" ng-model="formdata.myfield2" required>
    </div>
    <div>
      <input type="text" name="myfield3" ng-model="formdata.myfield3" required>
    </div>
    <button ng-click="check()">Check</button>
  </form>
  <pre>{{formdata | json}}</pre>
  <pre>{{validity | json}}</pre>
</div>

edited Nov 19, 2014 at 12:23

answered Nov 19, 2014 at 11:52

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

Jayesh Over a year ago

I added correct snippet now. am I doing anything wrong here??

Jayesh Over a year ago

hey, actually problem with my code is, I am adding loading few html partials to controller later time and till that that my controller is already loaded, So it is not able to identify those field that is what I suspect. I came to know that by alerting alert("Test "+JSON.stringify($scope.userSetupForm)), so I got undefined. am I correct, please verify?

Collectives™ on Stack Overflow

angularjs $valid not working on fields

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related