Issue
Can’t seem to find any info on this. Is it possible to use ng-pattern on a contenteditable div? When I try it doesn’t work:
<div contenteditable="true" ng-model="x.number" ng-pattern='/^(\d)+$/'>{{ x.number }}</div>
More specifically, the ng validation classes on the div element do not change when I type invalid entries.
Solution
In case anyone is wondering, I ended up adding a validation function in my controller on ‘keyup’ action like so:
element.bind('keyup', function(event) {
if(element.hasClass("ip-input")){
var validPattern = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
var result = validPattern.test(element.html());
if(result == true) {
element.removeClass("invalid-input");
element.removeClass("valid-input");
element.addClass("valid-input");
}
else {
element.removeClass("valid-input");
element.removeClass("invalid-input");
element.addClass("invalid-input");
}
}
});
This validates that an IP address field is valid.
Cheers
Answered By – RobPio
Answer Checked By – Senaida (AngularFixing Volunteer)