Question

我有一个自定义指令，当我一次更改输入值但当我提交表单而不更改输入字段值指令时，它不会显示错误消息。

HTML代码：

    <form name="myform" role="form" class="form-horizontal" method="post" novalidate>
        <div class="form-group">
            <label class="control-label col-sm-3" for="firstName">First name :</label>
            <div class="col-sm-9">
             <input name='firstName' class="form-control" type='text' required ng-model='name' string>
</div>
        </div>
 <div class="form-group">

            <input type="submit" value="Submit" class="btn btn-success" />
        </div>

    </form>

指令：

 validationModule.directive('string', function () {
    return {
        restrict: 'A',
        require: 'ngModel',

        link: function (scope, element, attr, ctrl) {
            function validationError(value) {

                if (value.length < 1) {
                    ctrl.$setValidity('required', false);
                    //showPopOver(element, "Required field");
                    errorValidation(element, "Required field");
               //     $(element).popover('show');
                }
                if (/[a-zA-Z]/.test(value)) {
                    ctrl.$setValidity('invalid', true);
                    // $(element).popover('destroy');
                    successValidation(element);
                }
                if (/[0-9]/.test(value)) {
                    ctrl.$setValidity('invalid', false)
                    errorValidation(element, "number not allowed");
                    // showPopOver(element, "number not allowed");
                 //   $(element).popover('show');
                }

                return value;
            }
            ctrl.$parsers.push(validationError);
        }
    };
});

如何调用指令对提交事件执行验证？

Answer 1

我不知道您正在使用哪个版本的角度，但是因为1.3验证器没有被攻击到解析器中。请参阅https://docs.angularjs.org/api/ng/type/ngModel.NgModelController中的$ validators 由于可能的名称冲突，也不鼓励使用此类通用名称作为指令。使用一些前缀，例如myString

如何在表单提交上调用自定义指令

1 个答案: