I have set a specific pattern for the email field which should follow this format:
pattern="^(([^<>()\[\]\.,;:\s@\']+(\.[^<>()\[\]\.,;:\s@\']+)*)|(\'.+\'))@(([^<>()[\]\.,;:\s@\']+\.)+[^<>()[\]\.,;:\s@\']{2,})$"
Additionally, there is a directive that utilizes ngModel on the same field:
<input pattern="^(([^<>()\[\]\.,;:\s@\']+(\.[^<>()\[\]\.,;:\s@\']+)*)|(\'.+\'))@(([^<>()[\]\.,;:\s@\']+\.)+[^<>()[\]\.,;:\s@\']{2,})$"
dir= "ltr"
class="form-control sgn-rounded_textbox"
name="emailBox1"
type="email"
ng-model="vm.model.emails.emailField"
input-change = vm.mail>
The inputChange directive is as follows:
(function () {
function inputChange($log, $timeout, $q, appCmdService) {
return {
restrict: 'A',
require: 'ngModel',
scope: {
inputChange: '='
},
link: function (scope, element, attrs, ngModel) {
var el = element[0];
if (checkForENSettings(scope)) {
if (ngModel) {
ngModel.$parsers.push(function (value) {
if(value){
//some logic to change the value....
ngModel.$setViewValue(value);
ngModel.$render();
el.setSelectionRange(start, end);
return value;
}
});
ngModel.$formatters.push(function (value) {
ngModel.$setViewValue(value);
ngModel.$render();
return value;
});
}
}
function checkForENSettings(scope){
if(scope.inputChange && scope.inputChange.lang === 'en'){
return true;
}
}
}
};
}
angular.module('common').directive('inputChange', inputChange);
})();
The input-change directive functions correctly on fields without a specified pattern. However, when combined with a pattern, the following error occurs:
Cannot assign to read only property 'message' of object '[object DOMException]'
This is followed by:
Error: [$rootScope:inprog] $digest already in progress
Is there a way to effectively utilize both ngModel and pattern on the same input field?
Thank you.