У меня есть массив «велосипедов», который необходимо заполнить в моей форме (минимальная длина - 1). В моем контроллере есть пустой массив this.bikes = []; '
У меня есть элементы управления, которые добавляют и удаляют велосипеды из массива.
addBike(bike){
this.bikes.push(bike);
this.currentBike = null;
}
removeBike(bike){
this.bikes = this.bikes.filter((b) => bike != b);
}
Как применить проверку формы к самому массиву, чтобы моя форма отображалась недействительной, если массив пуст (что-то вроде '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>
Я хочу использовать его, чтобы отключить кнопку отправки с помощью директивы ng-disabled.
<button class = "btn btn-primary" ng-disabled = "!$ctrl.form.$valid" ng-click = "$ctrl.continue()">Next</button>
Ты пытался
<button class = "btn btn-primary" ng-disabled = "!$ctrl.form.$valid || $ctrl.bikes.length==0" ng-click = "$ctrl.continue()">Next</button>
или вы можете добавить переменную в свой скрипт для отслеживания длины массива. Сказать
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;
}
и в твоей кнопке сделай
<button class = "btn btn-primary" ng-disabled = "!$ctrl.form.$valid || $ctrl.bikesArrayLength==0" ng-click = "$ctrl.continue()">Next</button>
Для этого можно использовать directive
. Сделайте directive
и в функции ссылки определите логику, если массив пуст, сделайте форму недействительной и она не будет отправлена, ваш код короткий, поэтому я не могу сделать это за вас.
Это угловатый способ решить вашу проблему. Все, что я могу сделать сейчас, это предоставить логику или дать вам представление о том, как это будет происходить.
.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})
Если это решение вашей проблемы, примите этот ответ, чтобы эта ветка могла быть закрыта, спасибо. И если вам понадобится дополнительная помощь, не стесняйтесь спрашивать.
В Html назовите это атрибутом тега, который вы считаете нужным (согласно вашему сценарию). Но помните о соглашении об именах для директивы. Он будет использоваться как атрибут, например <div dir-name></div>
, помните, что имя директивы было в camelCase dirName, используйте -
между camelCase и преобразуйте заглавный алфавит в маленький. Примите это как ответ, если получите решение. и спросите, нет ли у вас недоразумений.
К какому элементу я бы прикрепил директиву и как бы она выглядела?