Can someone assist me with an issue I'm having? I'm encountering an error while trying to dynamically validate input fields using Angular.js.
Error:
TypeError: Cannot read property '$invalid' of undefined
Let me explain the code that's causing the problem.
<form name="billdata" id="billdata" enctype="multipart/form-data" novalidate>
<div ng-repeat="mul in mulImage">
<input type="file" class="filestyle form-control" data-size="lg" name="upload_{{$index}}" id="bannerimage_{{$index}}" ng-model="mul.image" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-select="onFileSelect1($index);">
</div>
<input type="button" class="btn btn-success" ng-click="saveResturantDetails(billdata);" id="saveData" value="Save" style="margin-right:20px;"/> </div>
</form>
In this scenario, multiple images are being uploaded and validation should occur when the user clicks on the "save" button. Here is a breakdown of the controller-side code.
$scope.saveResturantDetails=function(billdata){
if(billdata.$valid){
}else{
if(angular.isDefined($scope.mulImage)){
for(var i=0;i<$scope.mulImage.length;i++){
var name='upload_'+i;
if(billdata.name.$invalid){
alert('Please add a valid image (e.g. .png or .jpeg) up to 2 MB in size in the image field '+(i+1));
return false;
}
}
}
}
}
The error arises at if(billdata.name.$invalid) as it's not able to recognize the correct name dynamically. It works fine when written as 'billdata.upload_0.$invalid', but I need to assign names dynamically. Any suggestions?