Convalida modulo con campi dipendenti in AngularJS

Question

Ho un oggetto che ha 2 campi, mentre 1 deve essere minore o uguale a un altro.

dire che è le impostazioni della quota HDD e ho bisogno del threshold essere minore o uguale al disco fisso di size.

Sto tentando di utilizzare lo ui-utils#validate di angular.

Questo è come ho ottenuto finora: http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/preview (spero il link funzionerà)

Il problema che sto avendo è che funziona per una sola direzione:

Impostazione size e poi giocare con threshold funziona ok

Ma se provo a cambiare size, dopo threshold non è in stato non valido - non succede nulla. Questo perché threshold non valido non è impostato sul modello e l'ID size viene confrontato con null o undefined (o qualcosa del genere).

Da un lato capisco la logica di non impostare un valore non valido sul modello ... ma qui sta venendo a modo mio.

Così, ogni aiuto che rende questo lavoro sarà apprezzato.

Answer 1

Ho giocato con direttive personalizzate e ho cucinato qualcosa che funziona per il mio caso.

Al mio ingresso per threshold ho less-than-or-equal="quota.size" direttiva, passando di proprietà del modello per convalidare contro (voglio quota.threshold a essere inferiore o uguale a quota.size):

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

In link funzione del lessThanOrEqual direttiva, inizia a guardare il quota.size e quando quota.size modifiche appena tenta di impostare il valore di visualizzazione corrente threshold del modello:

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

Quindi c'è il parser che esegue la convalida chiamando il metodo scope.thresholdValidate(thresholdValue) passandogli il valore candidato. Questo metodo restituisce true se la convalida è riuscita e se lo fa - restituisce il nuovo valore, altrimenti - il valore del modello attuale:

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

sto spingendo il parser di raccolta parser, come opposto a unshifting è come la maggior parte degli esempi suggerire, perché voglio angolare per convalidare required e number direttive, in modo da arrivare qui solo se ho un numero valido e analizzato (meno lavoro per me, ma per text ingressi probabilmente dovrebbe fare il lavoro di analisi)

Ecco il mio parco giochi: http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/preview

Answer 2

Meglio tardi che mai, è necessario aggiungere ng-model-options="{allowInvalid:true}" agli elementi di input del modulo per impedire che ciò accada, il problema è che quando una promessa viene rifiutata (ad es. utilizzando $q o $http) il modello, per impostazione predefinita, non viene aggiornato. Pazzesco eh! Mi è costato un giorno risolvere questo.

Ho scritto un plunkr appositamente per questo problema - Fidati di me questo codice è buono ... http://embed.plnkr.co/xICScojgmcMkghMaYSsJ/preview