【问题标题】:How to call custom directive on form submit如何在表单提交上调用自定义指令
【发布时间】:2015-09-21 05:13:03
【问题描述】:

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

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);
        }
    };
});

如何调用指令对提交事件进行验证?

【问题讨论】:

    标签: javascript angularjs forms angularjs-directive


    【解决方案1】:

    我不知道您使用的是哪个版本的 Angular,但由于 1.3 验证器没有被破解到解析器中。在https://docs.angularjs.org/api/ng/type/ngModel.NgModelController 中查看 $validators 由于可能的名称冲突,也不鼓励将此类通用名称用于指令。使用一些前缀,例如 myString

    【讨论】:

      猜你喜欢
      • 2015-12-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-06-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-20
      相关资源
      最近更新 更多