CODEWITHSUNDEEP
javascripthtmlangularjs
Jashaszun
Jashaszun

Reputation: 9270

How do I require multiple input fields in AngularJS?

I'm trying to write a simple page with a couple of inputs which should be required to not be empty.

Here's the code to do that (self-contained):

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script>
            var app = angular.module("myApp", []);
            app.controller('myController', ['$scope', function($scope) {
            }]);
        </script>
        <style>
            input.ng-invalid {
                background-color: pink;
            }
            input.ng-valid {
                background-color: lightgreen;
            }
        </style>
    </head>
    <body ng-app="myApp">
        <div ng-controller="myController">
            Description: *<input type="text" id="input-description" ng-model="req-text" required></input><br/>
            Order: *<input type="number" id="input-order" ng-model="req-number" value="100" step="100" required></input><br/>
        </div>
    </body>
</html>

What I was hoping it would do is start with the text field being blank and red (invalid), and the number field being 100 and green (valid).

The first thing I tried was setting both ng-models for the inputs to the same thing, but that caused the number field to update the text field when it was updated (but not the other way around).

Since that obviously didn't work, I tried using different models for the inputs, as shown in my code. However, now both inputs have a value of 0 (even the text field, which should still be blank), and both inputs cannot be typed into or otherwise edited.

What am I doing wrong, and how do I just get both inputs to be required separately by Angular?

Upvotes: 0

Views: 599

Answers (1)

Kirill Slatin
Kirill Slatin

Reputation: 6143

What you're doing wrong first of all is using illegal identifiers for models. req-number is not a valid identifier for a variable. (remember all of these models are actually refered as $scope.variableName, imagine $scope.req-number). Hence your inputs are made readonly. You can actually see that when you examine console of your browser.

Second, html attribute value is ignored for input in this case. Use controller function to set default values for your models. 

   app.controller('myController', ['$scope', function($scope) {
       $scope.req_number = 100;
   }]);
   ....
   <div ng-controller="myController">
        Description: *<input type="text" ng-model="req_text" REQUIRED><br/>
        Order: *<input type="number" ng-model="req_number" required><br/>
   </div>

Alternatively you can use ng-init to initiate the model. However as mentioned by @developer0333, this is not recommended because initialization logic is part of business logic and with project evolving can get more complicated then just setting primitive values.

<input type="number" ng-model="req_number" ng-init="req_number=100" required><br/>

Plunker with correct code

PS and a small remark, closing tags are ignored for <input>

Upvotes: 1

Related Questions