无法使用 AngularJS 验证多 select 输入

Question

我是 Angular 的新手，我很难验证具有 ngOptions 属性的多 select 输入。我希望该字段是必需的，因此用户必须至少选择一个选项。然而，验证方法 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>

即使我选择了一个产品并且我可以看到表格 class 从 .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');
    };
});

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

非常感谢任何帮助。

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

无法使用 AngularJS 验证多 select 输入

Unable to validate mutli-select input with AngularJS

javascript

angularjs

validation