Question

我面临着一个我似乎无法解决的问题。我有一个字段，我通过指令验证，该指令将输入值与正则表达式匹配。

我的意见：

 <input type="text"
        name="emailaddress"
        class="form-control"
        ng-model="fields.emailaddress.value"
        ng-maxlength="fields.emailaddress.validation.maxLength"
        validator-emailaddress
        required />

我的指示：

angular.module('forms')
    .directive('validatorEmailaddress', validatorEmailaddress);

/* @ngInject */
function validatorEmailaddress() {

    var directive = {
        require: 'ngModel',
        link: link
    };

    return directive;

    function link(scope, element, attrs, modelCtrl) {

        var valid = false;

        var formatter = function (inputValue) {
            if (inputValue) {
                var res = inputValue.match(/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/);
                if (res && res.length > 0) {
                    valid = true;
                }

                modelCtrl.$setValidity('pattern', valid);
                valid = false;
            } 
            return inputValue;
        };
        modelCtrl.$parsers.push(formatter);
        if (scope[attrs.ngModel] && scope[attrs.ngModel] !== '') {
            formatter(scope[attrs.ngModel]);
        }
    }
}

现在我的问题是：

当我填写输入时，一切都很好，但是，当我用无效值填充输入，然后在这种情况下重新打开模态时，无效模式不再存在，因此用户可以继续使用无效的输入值。

如何让我的指令也在提交时检查输入值？

提前致谢。

Answer 1

您可以使用 ng-pattern

实现相同的功能

示例代码 -

<div>
     <input type="text" ng-model="fields.email" name="email" ng-required="true" ng-pattern="/^[a-zA-Z0-9]+[a-zA-Z0-9._+-]+@[a-zA-Z0-9._+-]+\.[a-zA-Z0-9.]{2,10}$/">
     <div ng-messages="formname.email.$error">
          <div ng-message="required" class="form-error"> *Email is required. </div>
          <div ng-message="pattern" class="form-error"> *Email address is invalid </div>
     </div>
</div>

Answer 2

我通过改变我的指令解决了我的问题。我将发布我的指令以供将来参考：

Request: http://{{Url2}}/
    Query string parameters written to header fields,
        either by fields in the web test
        or by plugin creating the values            
Response: ...

感谢Fantarama指出了我正确的方向。我现在使用验证器而不是使用解析器。

AngularJS通过指令重新验证提交

2 个答案: