Angularjs表单验证会在加载空表单的页面时显示成功

angularjs form validation shows success on page load with empty form

本文关键字:表单 显示 成功 验证 加载 Angularjs      更新时间:2023-09-26

我有以下的表单,但有些字段显示成功消息框下面的页面加载,甚至没有触及表单。有什么问题吗?

这是控制器:

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>

尝试在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">

这里有一个已知的bug https://github.com/angular-ui/ui-select/issues/258