2013-09-07 3 views
8

Mi piace molto il modo in cui l'attributo ng-model si collega direttamente al mio modello e gli utenti ottengono un feedback immediato sulle loro modifiche. Per il mio caso d'uso è perfetto. Tuttavia, non voglio che i valori non validi vengano inseriti nel modello in cui possono lanciare una chiave inglese nei calcoli. In qualche modo voglio che il modello venga aggiornato solo se il valore nel controllo del modulo è valido. Per i valori non validi, è normale che il valore del controllo cambi mentre il valore del modello rimane fisso.Non registrare valori non validi con il modello ng

Se cambio la fonte di angolare (1.2rc) implementazione di NgModelController $ setViewValue:

this.$setViewValue = function(value) { 
... 
    if (this.$modelValue !== value) { 
    this.$modelValue = value; 
    ... 
    } 
}; 

A tal:

this.$setViewValue = function(value) { 
... 
    if (this.$modelValue !== value && this.$valid) { 
    this.$modelValue = value; 
    ... 
    } 
}; 

Sembra di fare esattamente quello che voglio, ma I don' So come farlo in modo corretto. Qual è il modo giusto per cambiare questo comportamento? Oppure i miei tentativi sono destinati all'insuccesso per qualche motivo?

Aggiornamento: Aggiunto esempio.

Per esempio guardo http://jsfiddle.net/FJvgK/1/ HTML:

<div ng-controller="MyCtrl"> 
    {{validNumber}} 
    <form> 
     <input 
      type="number" 
      ng-model="validNumber" 
      required 
      min="10" 
      max="20" 
     /> 
    </form> 
</div> 

E il JS:

var myApp = angular.module('myApp',[]); 

function MyCtrl($scope) { 
    $scope.validNumber = 15; 
} 

Il numero indica correttamente per valori compresi tra 10 e 20, ma voglio in modo che se improvvisamente digitare '8' nella casella o eliminare la seconda cifra lasciando '1' l'ultimo numero valido mostra ancora sopra. Cioè, il modello ha sempre un valore valido, anche se il controllo no.

risposta

7

Credo che il comportamento predefinito dei validatori AnugularJS non sia quello di aggiornare il modello se il valore passato non è valido. Se guardi il numero developer guide e passa attraverso Custom Validation questi esempi mostrano anche che il modello non è aggiornato o è cancellato con valore non valido fornito nell'interfaccia utente

+0

sì, mi spiace, ho aggiunto un esempio. Non voglio che il campo diventi nullo, voglio che mantenga un valore valido. –

+1

Avevi ragione. Non cambia il modello, ma semplicemente non mostra valori di modello non validi altrove nell'interfaccia utente che non mi aspettavo/volevo. –

2

Come ha detto Chandermani, è il comportamento predefinito, ecco un esempio che mostra in azione:

<form name="myform"> 
    <input type="text" name="myinput" ng-model="myvalue" ng-minlength="4" required> 
</form> 

Is the input valid ? {{ myform.myinput.$valid }} <br /> 
Input's value : {{ myvalue }} 

{{}} MyValue non mostra nulla fino a quando si scrive almeno 4 caratteri in ingresso.

I migliori saluti.

EDIT

Se avete bisogno di un valore predefinito, penso che si potrebbe abbattere il vostro valore in 2 valori, utilizzando un valore calcolato:

var validNumber = 15; 
    $scope.validNumber = function() { 
     if ($scope.myform.myNumber.$valid) return $scope.myNumber; 
     else return validNumber; 
    }; 

ho creato un esempio qui: http://jsfiddle.net/7vtew/1/

+1

sì scusa ho aggiunto un esempio. Non voglio che il campo diventi nullo, voglio che mantenga un valore valido. –

+0

Ho testato il tuo esempio. Il valore del modello diventa '' (stringa vuota) quando il valore digitato nel campo non è valido, il che è problematico poiché '' non è un valore valido in base ai vincoli di convalida di myinputs. http://jsfiddle.net/yU3Zv/ –

+0

Ho modificato con una possibile soluzione se hai bisogno di un valore predefinito. Grazie. – Prezbar

0

Questo è il comportamento di default, ma è possibile modificare la direttiva questo utilizzando ngModelOptions

<input 
    type="number" 
    ng-model="validNumber" 
    required 
    min="10" 
    max="20" 
    ng-model-options="{ allowInvalid: true }" 
    /> 

Documentazione: https://docs.angularjs.org/api/ng/directive/ngModelOptions Vedere la sezione "Aggiornamenti del modello e convalida"