2013-05-28 33 views
6

2 alana sahip bir nesneyim var, 1 değeri ise diğerinden küçük veya ona eşit olmalıdır.AngularJS'de Bağımlı Alanlarla Form Doğrulama

HDD kota ayarlarının diyelim ve threshold, HDD'nin size'dan daha az veya eşit olmasına ihtiyacım var.

Angular'ın ui-utils#validate'u kullanmaya çalışıyorum.

size ayarlama ve daha sonra threshold ile oynarken: http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/preview

ben yaşıyorum sorun, bir yöne çalışır olmasıdır (i bağlantı çalışacak umut):

Bu

Bugüne kadar var nasıl works ok

size'u değiştirmeye çalışırsam, threshold geçersiz durumdan sonra - hiçbir şey olmuyor. Bunun nedeni, geçersiz threshold modelinde ayarlanmamıştır ve size kimliği null veya undefined (veya bunun gibi bir şey) ile karşılaştırılmıştır.

Bir yandan modele geçersiz değer ayarlama mantığını anlıyorum ... ama işte bu benim yoluma çıkıyor.

Bu işi yapan her türlü yardım takdir edilecektir.

+2

Bu sorun burada tartışılıyor: https://github.com/angular-ui/ui-utils/issues/25 – ProLoser

+0

Daha önce hiç olmamasına rağmen, ng-model-options = "{allowInvalid: true}" formunu bu olayı durdurmak için form girdi öğelerinize eklemeniz gerekir - sorun, $ q hizmetinin bir yanıtı reddetmesidir. model, varsayılan olarak güncellenmez. Çılgın ha! Bana bunu bir gün harcaya çalış. Ctrl. $ SetViewValue (ctrl. $ ViewValue) için – danday74

cevap

6

Özel yönergelerle oynadım ve davam için çalışan bir şey pişirdim.

threshold benim girişinde hangi

(Ben quota.thresholdquota.size daha az veya eşit olmak istiyorum) karşı doğrulamak için o modelin özelliği geçerek less-than-or-equal="quota.size" direktif var:

<input type="number" name="threshold" 
    ng-model="quota.threshold" 
    required 
    less-than-or-equal="quota.size" /> 

lessThanOrEqual direktifin fonksiyonu link yılında

link: (scope, elem, attr, ctrl) -> 
    scope.$watch attr.lessThanOrEqual, (newValue) -> 
     ctrl.$setViewValue(ctrl.$viewValue) 
: quota.size ve sadece çalışır quota.size değişiklikler modele threshold mevcut görünüm değerini ayarlamak için izlemeye başlar

Ardından, aday değeri ileten scope.thresholdValidate(thresholdValue) yöntemini çağırarak doğrulamayı yapan ayrıştırıcı var. doğrulaması başarılı bu yöntem true döndürür ve onu yaparsa - Geçerli modelin değerini - aksi halde, yeni bir değer döndürür: örneklerin çoğunda gibi unshifting ters olarak,

ctrl.$parsers.push (viewValue) -> 
     newValue = ctrl.$modelValue 
     if not scope.thresholdValidate viewValue  
      ctrl.$setValidity('lessThanOrEqual', false) 
     else 
      ctrl.$setValidity('lessThanOrEqual', true) 
      newValue = viewValue 
     newValue 

Ben ayrıştırıcı koleksiyonuna ayrıştırıcı İtiyorum Ben required ve number direktifleri doğrulamak için açısal istiyorum, bu yüzden ben geçerli ve çözümlenen sayı varsa burada olsun, çünkü önermek (benim için daha az iş, ama text girişler için muhtemelen yapmalıyım ayrıştırma işi) İşte

benim oyun alanım: http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/preview

+1

+1 – rluba

3

Hiç geç olmamasına rağmen, bu durumu durdurmak için form giriş öğelerinize eklemeniz gerekir - sorun, bir söz reddedildiğinde (ör. $q veya $http kullanarak), varsayılan olarak, model güncellenmez. Çılgın ha! Bana bunu bir gün harcaya çalış.

Ben özellikle bu sorun için bir plunkr yazdım

- Bu kod iyidir bana güvenin ... http://embed.plnkr.co/xICScojgmcMkghMaYSsJ/preview