SORU
19 EYLÜL 2013, PERŞEMBE


Ng-desen Angularjs dinamik doğrulama

Eğer checkbox false ise metin girişi ng-gerekli Direktifi kullanarak doğrulama zorlayan bir form var. Eğer checkbox true ise, bu alan gizli ve ng-gerekli false olarak ayarlanır.

Sorun ben de doğrulama için bir düzenli ifade ng-desen açısal yönergesi kullanan ve giriş belirtildi. Sorunu ben çalışan içine eğer bir kullanıcı doldurur geçersiz bir telefon numarası, Çek kutusunu devre dışı bırakmak için giriş (ve dolayısıyla ihtiyaçlarına daha fazla doğrulama) şeklinde olmayacak izin verilmesi gibi geçersiz dayalı ng-desen.

Denedim bu sorunu gidermek için ekleyerek bir ng-değiştirme fonksiyonu ayarlamak için giriş modeli için boş, ancak ng-desen ve böylece bu alan hala ayarlamak için geçersiz başlangıç seti checkbox false. Ben ancak kutusunun işaretini kaldırın, ilk form yüklemek için her şeyi geri ayarı, kutuyu tekrar kontrol edin, formu ve göndermek için geçerli yapabiliyor. Özlüyorum ne emin değilim. Burada şimdiye kadar olan ng-değiştirme kodu:

    var phoneNumberRegex = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/;
    $scope.phoneNumberPattern = phoneNumberRegex;
    $scope.removeValidation = function() {
        if ($scope.cell._newUser === false) {
            $scope.request._number = '';
            $scope.phoneNumberPattern = /[0-9a-zA-Z]?/;
        } else {
            $scope.phoneNumberPattern = phoneNumberRegex;
        }
    };

CEVAP
24 EYLÜL 2013, Salı


Bu ilginç bir sorun, karmaşık Açısal doğrulama. Aşağıdaki keman istediğini uygular:

http://jsfiddle.net/2G8gA/1/

Ayrıntılar

Karışımı ng-required input[type=text] ng-pattern kod yeni bir Direktif, rpattern, ben yarattım. Ne alanı required öznitelik izle ve regexp ile doğrularken bunu hesaba başka bir deyişle, eğer gerekli değil valid-pattern. işareti alan

Notlar

  • Kodu en Açısal gelen, bu ihtiyaçları için özel olarak tasarlanmıştır
  • Onay kutusu işaretli olduğunda, bu alan gereklidir
  • Alan gerekli checkbox false olduğunda gizlenir
  • Düzenli ifade demo geçerlidir 3 basamak () için basitleştirilmiş

Birkirli(ama daha küçük) ise yeni bir Direktif istiyorsanız çözüm değil, şöyle bir şey olurdu:

$scope.phoneNumberPattern = (function() {
    var regexp = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/;
    return {
        test: function(value) {
            if( $scope.requireTel === false ) {
                return true;
            }
            return regexp.test(value);
        }
    };
})();

Ve HTML herhangi bir değişiklik gerekli olabilir:

<input type="text" ng-model="..." ng-required="requireTel"
    ng-pattern="phoneNumberPattern" />

Bu aslında girmeye açısal hilelerbizimtest() yöntem, yerine RegExp.test() Bu sitede dikkate alır gerekli.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Darren Kitchen

    Darren Kitch

    3 EKİM 2011
  • Hallucination Land

    Hallucinatio

    14 Ocak 2011
  • UberFacts

    UberFacts

    26 EKİM 2013