时间戳

首页 > 解决方案 > Angularjs 需要模型中数组的验证器

angularjs - 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>

标签： angularjsvalidation

解决方案

你有没有尝试过

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

推荐阅读