Attiva/disattiva $ setValidity dopo la modifica del modello

Question

Sto creando un modulo di registrazione in Angular con tre ingressi: email, password e passwordConfirm. Il mio controller è simile al seguente:

app.controller('SignupController', function ($scope, User) { 
    $scope.user = {}; 

    $scope.signup = function() { 
     User.save($scope.user, function(success) { 
      // TODO 
     }, function(error) { 
      if (error.status === 422) { 
       error.data.errors.forEach(function(item) { 
        $scope.signupForm[item.field].$setValidity(item.error, false); 
       }); 
      } 
     }); 
    }; 
}); 

Che cosa questo sta facendo è l'invio di una richiesta alla mia API quando l'utente invia il modulo per registrarsi. Se viene restituita una risposta 422 (che significa errori di convalida), effettuo il looping di tali elementi e imposta gli input corrispondenti su non valido in base a ciò che l'API ha restituito.

Facciamo l'esempio di un indirizzo email già registrato. Mostro l'errore di convalida, a mio avviso in questo modo:

<small class="error" ng-show="signupForm.email.$error.exists">Email address taken, please use another</small> 

Questo tutto funziona perfettamente, ma il mio utente è ormai bloccato perché quando si cerca di modificare l'indirizzo e-mail ad un altro, la validità del email campo isn' t modificato per consentire loro di inviare nuovamente il modulo (disabilitare il pulsante di invio in base alla validità del modulo).

Fondamentalmente, ho bisogno che la proprietà di convalida (in questo caso exists) venga reimpostata su true dopo che l'utente ha modificato il modello di input. Qual è il modo migliore per me di farlo?

Edit: Un piccolo lampo di genio mi ha colpito dopo la pubblicazione, ho aggiunto questo al mio controllo:

$scope.$watch('user.email', function() { 
    // Reset exists validation property back to true 
    $scope.signupForm.email.$setValidity('exists', true); 
}); 

che sembra funzionare. Quando l'utente modifica il valore del modello dopo che l'input è stato impostato su non valido, questo lo imposta su valido. Ma questo non mi sembra il modo migliore per farlo. Qualcuno sa meglio?

Answer 1

Ho anche faticato con questo problema. Dopo aver letto il tuo post mi si avvicinò con una soluzione possibile - creare una direttiva che sta guardando il modello per le modifiche e ripristinare lo stato di validità sul cambiamento (in pratica ciò che avete suggerito ma messo in una direttiva generica)

angular.module('app').directive('resetValidityOnChange', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function (scope, iElem, iAttrs, ngModelCtrl) { 
      ngModelCtrl.$viewChangeListeners.push(function() { 
       ngModelCtrl.$setValidity(iAttrs['resetValidityOnChange'], true); 
      }); 
     } 
    } 
} 

Avrete devi aggiungere questa direttiva agli input che desideri ripristinare, ad esempio:

<input type="text" ng-model="vm.email" reset-validity-on-change="exists" /> 

Answer 2

Hai sollevato una domanda molto interessante. Penso che con un piccolo trucco puoi farlo senza l'uso di $ watch.

Avrete bisogno di una piccola direttiva use-form-error, che aiuta a creare controlli sofisticati.

Un esempio di come si può utilizzare nel vostro caso, vedere jsfiddle

angular.module('ExampleApp', ['use']) 
 
    .controller('ExampleController', function($scope) { 
 
    $scope.errorsFromAjax = null; 
 
    $scope.simulateSubmit = function() { 
 
     $scope.errorsFromAjax = { 
 
     'testVal': 'used' 
 
     }; 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdn.rawgit.com/Stepan-Kasyanenko/use-form-error/master/src/use-form-error.js"></script> 
 
<div ng-app="ExampleApp"> 
 
    <div ng-controller="ExampleController"> 
 
    <div ng-form="testForm"> 
 
     <label>Test value</label> 
 
     <input ng-model="testVal" name="testVal" use-form-error="{{errorsFromAjax.testVal}}" use-error-expression="errorsFromAjax.testVal && testForm.$pristine"> 
 
     <pre>errors: {{testForm.testVal.$error|json}}</pre> 
 
     <span ng-show="testForm.testVal.$error[errorsFromAjax.testVal]" class="errors">You have error!</span> 
 
     <button ng-disabled="testForm.$invalid" ng-click="simulateSubmit(); testForm.$setPristine()"> 
 
     Simulate "Submit" 
 
     </button> 
 

 
    </div> 
 
    </div> 
 
</div>