How do I require multiple input fields in AngularJS?
Question
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-model s 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?
1 answers
solution1
1 ACCPTED 2016-07-20 18:58:08
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/>
PS and a small remark, closing tags are ignored for <input>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.