AngularJS - Üç giriş alanlı telefon numarası onayı

Question

Telefon numarası alanlarını doğrulamaya çalışıyorum. Koşullar, kullanıcı bir sonraki konum adı alanına girdiğinde alanlar onaylanır. fiddle Ayrıca, telefon numarası alanlarının bir sonraki telefon giriş alanına otomatik sekmesi olması gerekir. [Alan kodunu girerken (3 haneli) odak sonraki 3 haneli telefon giriş alanına gitmelidir. bittiğinde son 4 basamağa odaklanır.

<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

Bunu yapmak için olay işleme ile bir yönergeyi kullanabilirsiniz. Eğer açısal fonksiyonların içinde jQuery'nin seçicileri erişmek böylece açısal önce keman yılında

1) Yük jQuery: Updated Fiddle

anahtar değişiklikler

şunlardır.

2) Uygun direktif (Not ile bir kap içinde girdi sarın: Bu da yerine restrict: "A" ait restrict: "E" ile tek eleman ile yapılabilir ve çocuk HTML) tanımlamak için template özelliğini kullanın

3) input olayını girişlere taşıyın ve uzunluk maxlength özelliğindeki değeri aşıyorsa, sonraki girişe odaklanın. Bu jQuery ile gerçekten basit, ama gerçekten istemeden yapılabilir.

4) Girişlerde doğrulama yapmak için milyonlarca yol var, ancak basit bir yöntem ekledim.

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> 

Eğik Yönergesi

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