Question

我有一个包含2个选择列表的表单。第二个列表基于第一个列表填充。可能是第一个列表包含一个没有第二个列表值的项目。

表格在以下情况下有效

两个选项都选择了一个项目
第一个选择包含所选项目但没有子项，因此可以保持为空。

我的列表已正确填充。当我切换选择时，子列表也相应地改变。验证方法会触发并返回正确的结果。

它适用于以下情况：

选择包含子类别的主要类别 - ＆gt;表格无效
选择子类别 - ＆gt;有效表格
验证成功

但这不起作用，在我看来它应该

选择不包含子类别的主类别 - ＆gt;有效表格
验证触发器并返回true
表格未进入有效状态

这是添加我的控件的方式：

            <div class="form-group" ng-class="{'has-error' : myForm.MainCategories.$invalid && myForm.MainCategories.$dirty}">
                <label for="MainCategories" class="col-md-2 control-label">Main categories</label>
                <div class="col-md-4">
                    <select id="MainCategories" class="form-control" ng-model="data.model.mainCategoryId" ng-options="item.id as item.Description for item in data.mainCategories" ng-required="true"></select>
                    <span class="help-block" ng-show="myForm.MainCategories.$error.required && myForm.MainCategories.$dirty">Required field</span>
                </div>
            </div>

            <div class="form-group" ng-disabled="subCategoriesDisabled" ng-class="{'has-error' : myForm.SubCategories.$invalid && myForm.SubCategories.$dirty}">
                <label for="SubCategories" class="col-md-2 control-label">Sub categories</label>
                <div class="col-md-4">
                    <select id="SubCategories" class="form-control" ng-model="data.model.subCategoryId" ng-options="item.idas item.Description for item in subCategories()" ng-required="isSubCategoryValid()"></select>
                    <span class="help-block" ng-show="myForm.SubCategories.$error.required && myForm.SubCategories.$dirty">Required field</span>
                </div>
            </div>

我的javascript：

var matrixes = [];
$scope.subCategories= function () {

    matrixes = $scope.data.CategoryMatrixes .filter(function (matrix) {
        return matrix.mainId== $scope.data.model.mainCategoryId;
    });

    var subs= $scope.data.subCategories.filter(function (cat) {
        return (matrixes.filter(function (matrix) {
            return matrix.subId== cat.Id
        }).length > 0);
    });

    $scope.subCategoriesDisabled= subs.length == 0;

    return subs;
};

$scope.isSubCategoryValid= function () {
    if ($scope.subCategoriesDisabled== true) {
        return true;
    }
    if ($scope.data.model.subCategoryId== ""){
        return false;
    }
    var isValidCat = (matrixes.filter(function (matrix) {
            return matrix.subId== $scope.data.model.subCategoryId
    }).length > 0);

    if (isValidCat == true) {
        return true;
    }
    else {
        return false;
    }
}

Answer 1

禁用第二个输入（子类别）并在选择主类别时启用。选择主类别后，计算子类别列表并： *将其分配到范围， *启用子类别。

第二次输入我会编写自定义指令/验证器来检查： * if subcategories.length＆gt; 0＆amp;＆amp;被选中 * if subcategories.langth === 0 =＆gt;标记为有效

在谷歌搜索如何编写自定义valiation（使用$setValidity函数）

不应该将

ng-required分配给方法（良好实践），在控制器中编写验证代码并不好......在指令中更好

使用自定义控制器方法

1 个答案: