javascript - 无法使用 AngularJS 验证多选输入

Question

我是 Angular 新手，我很难使用 ngOptions 验证多选输入属性。 我希望该字段为必填字段，因此用户必须至少选择一个选项。然而，Angular 的验证方法在我的情况下根本不起作用，这是我尝试过的:

<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}} ，当我刷新页面时，我可以看到“false”一秒钟，但它消失了，为什么？

如果相关的话，这是 Controller :

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

我在网上搜索过，但似乎对我的情况没有任何作用。

我将非常感谢任何帮助。

Answer 1

您的变量名称冲突导致了问题:表单名为 products，最终成为 $scope 变量。但它与 Controller 中的 $scope.products = [] 发生冲突。只需将表单重命名为例如 productsForm 即可解决问题:

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