Hey there! I'm currently working on an application that requires extensive form validation across multiple pages. To streamline this process, I am attempting to extract validation patterns from a service used among the controllers.
However, I've encountered an issue where the ng-pattern does not react correctly when inputting a valid email address.
You can view the plunker for reference and here's the code snippet for the form:
<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">Submit</button>
{{newsletterForm.email.$error.pattern}}
</form>Below is the app.js code being referenced:
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();
});I suspect that the issue may be related to how Angular renders the pattern within the input tag, possibly causing it to escape the backslashes.
^([a-zA-Z0-9'.-_]{2,64})([@]{1})([a-zA-Z0-9.-_]{2,64})([.]{1})([a-zA-Z]{2,16})$I have attempted adding double backslashes in the service to ensure proper rendering by Angular, but unfortunately, it is still not functioning as expected. Any insights or suggestions would be greatly appreciated!