ユーザ入力に動的に設定NGパターンベース

Question

にIは、入力ボックス

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

IPv4とIPv6のI既に2つのパターン準備を持っています。

$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}))|:)))(%.+)?'; 

しかし、文字列が :が含まれている場合、どのように私はそれらのNGパターンは上の変更、入力ベースに、動的に適用することができますか？

Ex。 2001::1

入力は、その後:が含まれている場合、私は、IPv6のそれを知って、私はng-pattern="ipv6_regex"

を使用しますが、これは私は、フロントエンドのHTMLに達成できるものですか、私は入力を解析する必要があるとしますか私の角度コントローラのロジック？

これにはng-ifを使用できますか？

Answer 1

ng-modelを使用してユーザーの入力を保存して調べることができます。また、入力を確認するtimeOut関数を使用することもできます。例えば。

あなたのinputタグがこの

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

とJS（私はtypescriptですでそれを書いたが、あなたが要点を得ることを十分に読めるべきである。）の

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); 
}