Is ng-pattern possible on contenteditable elements?

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)