1

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

这里的问题是当我输入正确的电子邮件地址时，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})$

我已经尝试在服务中添加双反斜杠以使角度渲染正确，但它仍然无法正常工作。有任何想法吗？

4

1 回答 1

0

ng-pattern与$scope变量一起使用。在你的情况下，它应该是

<input ng-pattern="patterns.email"

更新plunker

于 2016-04-14T10:23:02.307 回答