AngularJS - 3つの入力フィールド電話番号の検証

Question

電話番号フィールドを検証しようとしています。ユーザが次のロケーション名フィールドを入力すると、フィールドは検証されます。 fiddle また、電話番号フィールドには、次の電話入力フィールドに自動タブが必要です。 [市外局番（3桁）を入力すると、次の3桁の電話入力フィールドに進む必要があります）。最後の4桁に焦点を当てたとき。

<form id="aidLocationForm" class="well form-inline"> 
    <div class="control-group phone-group"> 
     <label for="phone1" class="col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 control-label">Primary contact number</label> 
     <div class="controls"> 
     <input type="text" value="" maxlength="3" ng-minlength="3" ng-maxlength="3" class="area-code input-mini aid-primary-phone1-lbl" aria-label="Primary contact number" pattern="/^[0-9]{3}$"> 
     <input type="text" value="" maxlength="3" ng-minlength="3" ng-maxlength="3" class="area-code input-mini aid-primary-phone2-lbl" aria-label="Primary contact number" pattern="/^[0-9]{3}$"> 
     <input type="text" value="" maxlength="4" ng-minlength="4" ng-maxlength="4" class="area-code input-mini aid-primary-phone3-lbl" aria-label="Primary contact number" pattern="/^[0-9]{4}$"> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label for="primaryLocationName" class="col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4 control-label aid-primary-location-location-lbl">Primary Location Name</label> 
     <!-- end of label --> 
     <div class="controls"> 
     <input type="text" name="primaryLocationName" id="primaryLocationName" class="col-xs-12 col-sm-9 col-md-6 col-lg-6 col-xl-6 aid-primary-location-name-input" ng-model="" required placeholder="Enter the city followed by location" size="50" maxlength="50" 
     aria-disabled="true" aria-label="Primary Location Name"> 
     </div> 
    </div> 
    <button type="submit" class="btn">Sign in</button> 
    </form> 

Answer 1

これを達成するために、イベント処理でディレクティブを使用できます。

Updated Fiddle

キーの変更は、次のものがあります。

1）あなたは、角度の関数の内部jQueryのセレクタへのアクセスを得るよう前の角度あなたのフィドルでのjQueryをロードします。

2）適切な指示（注意して容器の中に、あなたの入力をラップ：これはまた、代わりにrestrict: "A"のrestrict: "E"で一つの要素で行うことができ、子HTML）を定義するためにtemplateプロパティを使用し

3）入力上のinputイベントを処理し、長さがmaxlengthプロパティの値を超える場合は、次の入力にフォーカスします。これはjQueryを使って本当にシンプルですが、本当にしたい場合を除いて行うことができます。

4）入力の検証には数百万の方法がありますが、簡単な方法が含まれています。

HTML

<div phone-input> 
    <input type="text" value="" maxlength="3" class="area-code input-mini aid-primary-phone1-lbl" 
     aria-label="Primary contact number" pattern="^[0-9]{3}$"> 
    <input type="text" value="" maxlength="3" class="area-code input-mini aid-primary-phone2-lbl" 
     aria-label="Primary contact number" pattern="^[0-9]{3}$"> 
    <input type="text" value="" maxlength="4" class="area-code input-mini aid-primary-phone3-lbl" 
     aria-label="Primary contact number" pattern="^[0-9]{4}$"> 
</div> 

角度指令

.directive("phoneInput", function() { 
    return { 
    restrict: "A", 
    link: function (scope, element, attrs) { 
     function checkForErrors(input) { 
     var errors = ""; 
     if (!new RegExp(input.attr("pattern")).test(input.val())) { 
      errors += `Field must contain ${input.attr("maxlength")} numbers!\n`; 
     } 
     return errors; 
     } 
     element.on("input", "input", function() { 
     var trigger = $(this); 
     if (trigger.val().length >= trigger.attr("maxlength")) { 
      trigger.blur().next().focus(); 
     } 
     }); 

     element.on("blur", "input", function() { 
     var trigger = $(this); 
     var errors = checkForErrors(trigger); 
     trigger.attr("title", errors); 
     if (trigger.val().trim() === "") { 
      trigger.addClass("invalid-field"); 
      trigger.attr("title", "Field cannot be empty!"); 
     } 
     else if (errors === "") { 
      trigger.removeClass("invalid-field"); 
     } 
     else { 
      trigger.addClass("invalid-field"); 
      trigger.focus(); 
     } 
     }); 
    } 
    } 
})