Question

您好我正在运行一个需要在页面上进行大量表单验证的应用程序，所以我试图从控制器中使用的服务中获取验证模式。

这里的问题是当我输入正确的电子邮件地址时，ng-pattern没有以正确的方式做出反应。

这是plunker，此处是表单

的代码

    <form method="POST" action="#" name="newsletterForm" id="newsletterForm" ng-controller="newsletterForm" novalidate>
        <input ng-pattern="/{{patterns.email}}/" type="email" name="email" ng-model="email" required />
        <button type="submit">Invia</button>
        {{newsletterForm.email.$error.pattern}}
    </form>

这是app.js代码

var app = angular.module('plunker', []);
app.controller('MainCtrl', function(){});
app.service('validationPatterns', function() {
    this.getPatterns = function() {
        return {
            email:  "^([a-zA-Z0-9\'\.\-\_]{2,64})([\@]{1})([a-zA-Z0-9\.\-\_]{2,64})([\.]{1})([a-zA-Z]{2,16})$"
        }
    }
});
app.controller('newsletterForm', function($scope, validationPatterns){
    $scope.patterns = validationPatterns.getPatterns();
});

我认为问题可能是当角度渲染输入标记内的模式时，它会使它转义为反斜杠

^([a-zA-Z0-9'.-_]{2,64})([@]{1})([a-zA-Z0-9.-_]{2,64})([.]{1})([a-zA-Z]{2,16})$

我已经尝试在服务中添加双反斜杠以使角度渲染正确但它仍然不起作用。有什么想法吗？

Answer 1

ng-pattern适用于$scope变量。在你的情况下它应该是

<input ng-pattern="patterns.email"

更新了plunker

将ng-patten作为服务的变量

1 个答案: