Question

我有以下表单，但是某些字段在页面加载框下方显示成功消息，甚至没有触及表单。有什么问题？

这是控制器：

app.controller('ValidationCtrl', ["$scope", "$state", "$timeout", "SweetAlert","$location", "firebase", "$translate","$http", "$rootScope", "flowFactory",
    function ($scope, $state, $timeout, SweetAlert, $location, firebase, $translate, $http, $rootScope, flowFactory) {

        $scope.master = $scope.myModel;
        $scope.form = {

            submit: function (form) {
                var firstError = null;
                if (form.$invalid) {
                    var field = null, firstError = null;
                    for (field in form) {
                        if (field[0] != '$') {
                            if (firstError === null && !form[field].$valid) {
                                firstError = form[field].$name;
                            }
                            if (form[field].$pristine) {
                                form[field].$dirty = true;
                            }
                        }
                    }
                    angular.element('.ng-invalid[name=' + firstError + ']').focus();
                    SweetAlert.swal("The form cannot be submitted because it contains validation errors!", "Errors are marked with a red, dashed border!", "error");
                    return;

                } else {
                    SweetAlert.swal("Good job!", "Your form is ready to be submitted!", "success");
                    //your code for submit
                }

            },
            reset: function (form) {

                $scope.myModel = angular.copy($scope.master);
                form.$setPristine(true);

            }
        };

}]);

以下是在空表单上显示页面加载成功文本的字段：

<div class="form-group" ng-class="{'has-error':Form.keyword.$dirty && Form.keyword.$invalid, 'has-success':Form.keyword.$valid}" >
    <label class="control-label" translate="list.keyword">
        Keyword<span class="symbol required"></span>
    </label>
    <ui-select multiple tagging tagging-label="true" ng-model="myModel.keyword" theme="bootstrap" name="keyword"  title="Choose a keyword">
        <ui-select-match placeholder="Enter the keywords...">{{$item}}</ui-select-match>
        <ui-select-choices repeat="r in list.keylist | filter:$select.search">
            {{r}}
        </ui-select-choices>
    </ui-select>
    <span class="error text-small block" ng-if="Form.keyword.$dirty && Form.keyword.$error.required">Keyword is required.</span>
    <span class="error text-small block" ng-if="Form.keyword.$dirty && Form.keyword.$error.minlength">Too short!</span>
    <span class="success text-small" ng-if="Form.keyword.$valid">Correct!</span>
</div>

Answer 1

尝试在ui-select中使用required和minlength属性。跟随之类的东西。

<ui-select multiple tagging tagging-label="true" ng-model="myModel.keyword" theme="bootstrap" name="keyword"  title="Choose a keyword" required minlength="6">

此处有一个已知错误https://github.com/angular-ui/ui-select/issues/258

angularjs表单验证显示页面加载成功与空表单

1 个答案: