无法使用AngularJS验证多选输入

我是Angular的新手，我很难验证具有ngOptions属性的多选输入。我希望该字段是必需的，所以用户必须至少选择一个选项。但是角度验证方法已经根本没有我的情况下工作，这是我已经试过：无法使用AngularJS验证多选输入

<form name="products" novalidate> 
    <div class="form-group"> 
     <label for="select-product">Chose product/s</label> 
     <select id="select-product" name="selectedProduct" class="form-control" 
       required 
       multiple 
       ng-model="selectedProduct" 
       ng-options="product.name for product in products"> 
     </select> 
    </div> 
    <button class="btn btn-primary pull-left" ng-click="products.selectedProduct.$valid && goToChildrenId()">Next</button> 
</form>

即使我选择了一个产品，我可以看到表单类开关从.ng-invalid到.ng-valid，该功能goToChildrenId()不运行。

另外，如果我在底部添加{{products.selectedProduct.$valid}}，当我刷新页面时，我可以看到“假”一秒但它消失了，为什么？

如果是培训相关，这是控制器：

adminCheckout.controller('productsCtrl', function($scope, $http, wpMiniapps, $location, $rootScope){ 
    $scope.products = []; 
    var url = wpMiniapps.routeUrl("getProducts"); 
    $http.post(url, {}).then(function(res){ 
     $scope.products = res.data.data; 
    }, function(err){ 
     console.log(err); 
    }); 

    $scope.$watch('selectedProduct', function (newVal) { 
     $rootScope.globalData.products = newVal; 
    }); 

    $scope.goToChildrenId = function(){ 
     $location.path('/select-children'); 
    }; 
});

我在网上搜索，但似乎没有在我的情况下工作。

我会很感激任何帮助。

来源

2017-10-04 Avishay28

您的变量名称冲突导致此问题：表单名称为products，并且此变量结尾为$scope变量。但它与来自控制器的$scope.products = []相冲突。只需将表单重命名为例如productsForm即可解决问题：

<form name="productsForm" novalidate> 
    ... 
    <button class="btn btn-primary pull-left" ng-click="productsForm.selectedProduct.$valid && goToChildrenId()">Next</button> 
</form>

来源

2017-10-06 15:10:14

无法使用AngularJS验证多选输入

回答

相关问题