Check Input field empty or not for dynamic text field Angularjs
Question
How to validate validate multiple text field in angularjs controller function. I am using angular js 1.5.6 Here html code
<div ng-controller="Controller">
<div ng-repeat="data in datas track by $index">
<div class="form-group">
<div class="col-sm-8">
<input type="text" class="form-control input-sm"
name="info[]"
id="info[$index]"
ng-model="sendInformation.info[$index]" required>
</div>
</div>
</div>
<a href="" ng-click="getValue()">Get Value</a>
{{result}}
Ande here is js code
myApp.controller('Controller', function($scope) {
$scope.sendInformation = {
info: []
}
$scope.datas = [
{"id":'1'},
{"id":'1'},
{"id":'1'},
];
$scope.getValue = function()
{
if($scope.sendInformation.info == null)
{
$scope.result = "Empty ____ Field";
}
else
{
$scope.result = "Ok";
}
}
});
And I made a plunker: https://plnkr.co/edit/ZvrvzNwMwDSDHfHDrqGs?p=preview I don't understand how to get the dynamic text value for validate that it is empty or not. Thanks.
1 answers
solution1
1 ACCPTED 2017-09-28 06:33:20
You can just convert it into a form. Give them unique names using ng-attr-name="info-{{data.id}}" (Eg: If the id is 1 the name will get evaluated to name="info-1" ), then add a ng-disabled attribute to the button, since we have added form.$invalid inside the ng-disabled , the required attribute of each input element, if empty will set the form.invalid to true, unless we fill up all the input boxes! Like shown below.
var myApp = angular.module('app', []); myApp.controller('Controller', function($scope) { $scope.errorMessage = ""; $scope.sendInformation = { info: [] } $scope.datas = [ {"id":'1'}, {"id":'2'}, {"id":'3'}, ]; $scope.getValue = function(form){ var errors = ""; for(var x of form.$error.required){ errors = errors + x.$name + " "; } if(form.$invalid){ $scope.errorMessage = "Fields " + errors + "are required!"; }else{ $scope.errorMessage = ""; } } });
<!DOCTYPE html> <html ng-app="app"> <head> <title>test</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body> <div ng-controller="Controller" ng-init="disabled=false;"> <form name="form"> <div ng-repeat="data in datas track by $index"> <div class="form-group"> <div class="col-sm-8"> <input type="text" class="form-control input-sm" ng-attr-name="field-{{data.id}}" id="info[$index]" ng-model="sendInformation.info[$index]" required> </div> </div> </div> <button href="" ng-click="getValue(form);disabled=true;">Get Value</button> <br> <br> <br> <br> <span>{{errorMessage}}</span> </form> </div> </body> </html>
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.