angularjscontenteditableangularjs-validationng-patternangularjs-ng-pattern

Is ng-pattern possible on contenteditable elements?


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