Angular ui-select multiple和ui-validate

时间:2016-01-17 04:18:09

标签: jquery css angularjs jquery-ui angular-ui-select

在我的角度应用程序中,我使用ui-select(angular-ui-select)。

如果控件是多个选项,则添加“ng-required”属性不起作用。

我找到了添加ui-validate标签的选项。并且似乎在我填写此字段之前表格不会发送。

这是我的代码

<ui-select multiple ui-validate="{required: 'validateToRequired($value)'}" ng-model="newForm.to" ng-disabled="disabled" style="width: 100%;">
 ........
</ui-select>

和控制器

      $scope.validateToRequired = function (value) {
        return !_.isEmpty(value);
    }
     $scope.submit = function () {

            if ($scope.New_Form.$valid) {
alert("valid");
    }
    }

我的问题是如何找到该字段为空且未验证的css类

类似.ng-invalid Css Class

  input.ng-invalid {
            background-color: #FA787E;
        }

目前我在控制台中看不到任何css类

enter image description here 感谢

1 个答案:

答案 0 :(得分:0)

好的,我找到了解决方案

  <div class="m-b-15" ng-class="{'ui-valid':newForm.to.length>0}">
                        <ui-select multiple ui-validate="{required: 'validateToRequired()'}" ng-model="newForm.to" ng-disabled="disabled" style="width: 100%;">

                        </ui-select>
                    </div>

和css类

form {
        &.ng-submitted {
            .ng-invalid {
                border-color: #FA787E;
                background-color: #fcc9c9;
            }

            .ui-select-multiple {
                border-color: #FA787E;
                background-color: #fcc9c9;
            }

            .ui-valid {
                .ui-select-multiple {
                    border-color: #ccd0d4;
                    background-color: #fff;
                }
            }
        }
    }