Search code examples
javascriptangularjsvalidationangularjs-validation

Angular simple validation not working

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