Angularjs требуется валидатор для массива в модели

У меня есть массив «велосипедов», который необходимо заполнить в моей форме (минимальная длина - 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>
Знаете ли вы, что директивы являются одной из самых мощных и универсальных функций Angular?
Знаете ли вы, что директивы являются одной из самых мощных и универсальных функций Angular?
Директивы позволяют расширять HTML новыми элементами и атрибутами и даже создавать собственные структурные директивы для манипулирования DOM. С...
Разница между Angular и React
Разница между Angular и React
React и AngularJS - это два самых популярных фреймворка для веб-разработки. Оба фреймворка имеют свои уникальные особенности и преимущества, которые...
0
0
589
2

Ответы 2

Ты пытался

<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})

Если это решение вашей проблемы, примите этот ответ, чтобы эта ветка могла быть закрыта, спасибо. И если вам понадобится дополнительная помощь, не стесняйтесь спрашивать.

К какому элементу я бы прикрепил директиву и как бы она выглядела?

user394749 10.08.2018 17:31

В Html назовите это атрибутом тега, который вы считаете нужным (согласно вашему сценарию). Но помните о соглашении об именах для директивы. Он будет использоваться как атрибут, например <div dir-name></div>, помните, что имя директивы было в camelCase dirName, используйте - между camelCase и преобразуйте заглавный алфавит в маленький. Примите это как ответ, если получите решение. и спросите, нет ли у вас недоразумений.

ahsan ayub 10.08.2018 22:05

Другие вопросы по теме