Clash Royale CLAN TAG#URR8PPP

Angularjs required validator for array in model

I have an array of 'bikes' that is required to be populated in my form (minimum length of 1). In my controller I have an empty array 'this.bikes = ;'

I have some controls which add and remove bikes from the array.

addBike(bike)
this.bikes.push(bike);
this.currentBike = null;

removeBike(bike)
this.bikes = this.bikes.filter((b) => bike != b);



How do I apply form validation on the array itself so that my form shows invalid if the array is empty (Something like 'if ($ctrl.bikes.length == 0) $ctrl.form.bikes.$valid = false)?

<label for="bike-make-model">Enter make and model of bike</label>
<div class="input-group p-relative">
<input name="bikeMakeModel" type="text" ng-model="$ctrl.currentBike" class="form-control" id="bike-make-model">
<span class="input-group-btn ">
<button class="btn btn-default" ng-click="$ctrl.addBike($ctrl.currentBike)" ng-disabled="!$ctrl.currentBike">ADD</button>
</span>
</div>
</div>
<div class="list-group" ng-show="$ctrl.bikes.length > 0">
<ul>
<li class="list-group-item" ng-repeat="bike in $ctrl.bikes">
<span>bike </span>
<i ng-click="$ctrl.removeBike(bike)" class="pointer pull-right far fa-trash-alt"/>
</li>
</ul>
</div>


I want to use it for to disable my submit button using the ng-disabled directive.

<button class="btn btn-primary" ng-disabled="!$ctrl.form.$valid" ng-click="$ctrl.continue()">Next</button>


2 Answers
2

Have you tried

<button class="btn btn-primary" ng-disabled="!$ctrl.form.$valid || $ctrl.bikes.length==0" ng-click="$ctrl.continue()">Next</button>


or you could add a variable in your script to monitor the length of the array. Say

addBike(bike)
this.bikes.push(bike);
this.currentBike = null;
this.bikesArrayLength = this.bikes.length;

removeBike(bike)
this.bikes = this.bikes.filter((b) => bike != b);
this.bikesArrayLength = this.bikes.length;



and in your button do

<button class="btn btn-primary" ng-disabled="!$ctrl.form.$valid || $ctrl.bikesArrayLength==0" ng-click="$ctrl.continue()">Next</button>


You can use directive for this purpose. Make a directive and in link function define the logic , if the array is empty make form invalid and it won't submit, your code is short that is why , i can't do it for you.

directive

directive

This is angular way to solve your problem. All i can do now is provide the logic or give you idea how this will go down.

.directive("dirName",function()
return
require: "ngModel",
scope:
confirmArrayLength: "="
,
link: function(scope, element, attributes, modelVal)
modelVal.$validators.dirName= function(val)
return "your logic to check if array is empty or not!"
;
// and $watch function will validate and invalidate on the basis of return value of above function
scope.$watch("confirmArrayLength", function()
modelVal.$validate();
);

//link ends here

;//return ends here)


If this is the solution of your problem then accept this answer so that this thread can be close, thanks. And if you need any further assistance then feel free to ask.

<div dir-name></div>

-

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.