Angular simple validation not working

Issue

Here is some plunker I have created. I cant understand why it is not working.
Here is the JS:

  angular.module('demo', [
  ]).controller('MainCtrl', function($scope)
  {
    $scope.name = "Vlad";
    $scope.age = 11;

    $scope.sendTest = function() 
    {
      console.log($scope.name.$valid);
      console.log($scope.age.$valid);
    }
  });

Here is the html:

<body ng-controller="MainCtrl">
    <form name="form" novalidate>
            <p>
                <label>Number: </label>
                <input type="text" min="0" max="10" ng-model="age" required />
            </p>
            <p>
                <label>Name: </label>
               <input type="text" ng-model="name" required />
            </p>
            <button ng-click="sendTest(test)">Submit</button>
        </form>
  </body>

The problem is that I am getting undefined in the console (instead of true, false).

Solution

Two things.

You need to access the form fields via the form object

console.log($scope.form.name.$valid);
console.log($scope.form.age.$valid);

And to be able to do that, you need to set the name attribute on the inputs

<input type="number" name="age" min="0" max="10" ng-model="age" required />
<input type="text" name="name" ng-model="name" required />

Well, three things. You need input type="number" for min and max to work. See docs

Answered By – ivarni

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.