Dynamically Set ng-pattern base on user inputs

Question

I have input box

<input type="text" class="text-primary" ng-pattern="ip_regex or ipv6_regex" name="newIP" ng-model="macbinding.newIP" ng-change="checkDuplicates('newIP')">

I already 2 patterns for IPv4 and IPv6 ready.

$scope.ip_regex = '^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$';


$scope.ipv6_regex = '((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)(\\.(25[0-5]|2[0-4]\\d|1\\d\\d|[1-9]?\\d)){3}))|:)))(%.+)?';

But how can I apply those ng-pattern dynamically to that input base on-change if a string contain a : ?

Ex. 2001::1

If inputs contain : then, I know it an IPv6 then, I will use the ng-pattern="ipv6_regex"

Is this something that I can achieve on front-end HTML, or do I need to parse the input and do a logic in my angular controller ?

Can I use ng-if for that ?

Answer 1

You can use a combination of ng-model to store and examine your user's input, and a timeOut function to tell you when to check the input. For example.

Your input tag would look like this

<input id="textBox" ng-model="$ctrl.userInput" value="$ctrl.userInput"/>

And the Js (I wrote it in typescript, but it should be readable enough that you get the gist.)

userInput: string = '';

//setup before functions
typingTimer: number; //timer identifier

//on keyup, start the countdown
$('#textBox').on('keyup', function () {
    if (typingTimer){
        clearTimeout(typingTimer);
    }

    //if no keyup event is found in 3000ms (3 seconds) execute doneTyping()
    typingTimer = setTimeout(doneTyping, 3000);
});

//user is "finished typing," do something
function doneTyping() {
    //check for ':'
    var foundSemiColon: boolean = false;
    //for every character in, userInput see if that character's code value equals 58. 
    //58 is the ASCII representation of a semi-colon
    for (var i: number = 0; i < userInput.length; i++) {
        if (userInput.charCodeAt(i) === 58) {
            //Semi-colon found use IPv6
            break;
        }
    }

    //if foundSemiColon === false you didn't find a semi-colon
    if (!foundSemiColon) {
        //use IPv4
    }

    //Now that you're done and know what to use, clear your timeOut event
    clearTimeout(typingTimer);
}