无法使用 AngularJS 验证多选输入答案

【问题标题】：Unable to validate mutli-select input with AngularJS无法使用 AngularJS 验证多选输入
【发布时间】：2017-10-04 08:02:55
【问题描述】：

我是 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”一秒钟但它消失了，为什么？

如果是相关的，这就是控制器：

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

我搜索了网络，但在我的情况下似乎没有任何效果。

我将非常感谢任何帮助。

【问题讨论】：

标签： javascript angularjs validation

【解决方案1】：

您有一个导致问题的变量名冲突：表单被命名为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>

【讨论】：