Walidacja formularza z polami zależnymi w AngularJS

Question

Mam obiekt, który ma 2 pola, a 1 powinien być mniejszy lub równy drugiemu.

Powiedz, że jest to limit dysku twardego i potrzebuję, aby threshold był mniejszy lub równy size dysku twardego.

Próbuję użyć wartości kątowej ui-utils#validate.

To jak mam do tej pory: http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/preview (mam nadzieję, że link zadziała)

Problem, który mam jest to, że działa na jednym kierunku:

Setting size a następnie gra z threshold działa ok

Ale jeśli próbuję zmienić size, po threshold jest w nieprawidłowym stanie - nic się nie dzieje. Wynika to z faktu, że nieprawidłowy threshold nie jest ustawiony na modelu, a identyfikator size jest porównywany z null lub undefined (lub czymś podobnym).

Z jednej strony rozumiem logikę, że nie ustawiam nieprawidłowej wartości w modelu ... ale tutaj wchodzi mi to w drogę.

Każda pomoc w tej pracy zostanie doceniona.

Answer 1

Grałem z niestandardowymi dyrektywami i gotowałem coś, co działa w moim przypadku.

Na moim wejściu do threshold mam dyrektywę less-than-or-equal="quota.size", przekazując jej własność modelu do sprawdzania poprawności przeciwko (Chcę quota.threshold być mniejsza lub równa quota.size):

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

W link funkcją dyrektywy lessThanOrEqual to zacznie oglądać quota.size i kiedy quota.size zmiany po prostu próbuje ustawić aktualną wartość wyświetl threshold na modelu

link: (scope, elem, attr, ctrl) -> 
    scope.$watch attr.lessThanOrEqual, (newValue) -> 
     ctrl.$setViewValue(ctrl.$viewValue) 

Następnie jest analizator składni, który dokonuje walidacji, wywołując metodę scope.thresholdValidate(thresholdValue), przekazując jej wartość kandydującą. Ta metoda zwraca true jeżeli walidacja udało, a jeśli to robi - to zwraca nową wartość, w przeciwnym wypadku - wartość prądu modelu:

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

jestem pchanie parsera do kolekcji parsera, jako przeciwieństwo do unshifting go jak większość przykładów sugerować, bo chcę kątowe do sprawdzania required i number dyrektyw, więc ja się tu tylko wtedy, gdy mam ważny i przetworzoną ilość (mniej pracy dla mnie, ale dla text wejść pewnie powinien wykonać zadanie parsowania)

Oto mój plac zabaw: http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/preview

Answer 2

Lepiej późno niż wcale, musisz dodać ng-model-options="{allowInvalid:true}" do elementów wejściowych formularza, aby to się stało - problem polega na tym, że gdy obietnica zostanie odrzucona (np. przy użyciu $q lub $http) model domyślnie nie jest aktualizowany. Crazy huh! Kosztować mnie dzień, pracując nad tym.

Napisałem plunkr specjalnie dla tego problemu - Zaufaj mi ten kod jest dobry ... http://embed.plnkr.co/xICScojgmcMkghMaYSsJ/preview