Pourquoi le réglage de ng-model en undefined ne rend-il pas la forme / l'entrée valide à nouveau?

J'ai la forme simple suivante avec une entrée type = 'email' liée à un modèle:

<div ng-app> <h2>Clearing ng-model</h2> <div ng-controller="EmailCtrl"> <form name="emailForm" ng-submit="addEmail()"> <input type="email" name="email" ng-model="userEmail" placeholder="[email protected]"> <span ng-show="emailForm.email.$invalid && emailForm.email.$dirty">invalid email</span> <span ng-show="emailForm.$invalid">form invalid!</span> </form> <br/> <button ng-click="clearViaUndefined()">clear via undefined</button> <button ng-click="clearViaNull()">clear via null</button> <button ng-click="clearViaEmptyString()">clear via empty string</button> </div> </div>

Supposons que l'utilisateur entre un mail invalide mais clique sur un bouton 'Annuler' … alors le formulaire doit être réinitialisé.

Dans le gestionnaire ng-click pour le bouton 'Annuler', si je définis la valeur du modèle dans 'indéfini', cela ne modifie pas la propriété $ valide $ de l'élément d'entrée en vrai (ni la forme pour cette question).

 function EmailCtrl($scope) { $scope.clearViaUndefined = function () { $scope.userEmail = undefined; }; $scope.clearViaNull = function () { $scope.userEmail = null; }; $scope.clearViaEmptyString = function () { $scope.userEmail = ""; }; }

Si je définis la valeur du modèle sur une chaîne vide "" ou sur nulle, la propriété $ valide est rétablie sur true.

Pourquoi est-ce?

J'ai un JS Fiddle ici démontrant le comportement:

Http://jsfiddle.net/U3pVM/12830/

Chaque fois que vous utilisez ng-model sur une entrée ou une étiquette de sélection, angulaire gère intérieurement deux valeurs pour le champ, l'une est $viewValue et l'autre est $modelValue

$ ViewValue -> Utilisé pour l'affichage sur la vue

$ ModelValue-> Valeur réelle utilisée dans la portée.

Lorsque vous utilisez une étiquette de saisie avec type='email' Angular valide constamment la valeur d'entrée.

Et si la valeur ne valide pas comme un courrier correct, angulaire interne définit $modelValue à undefined et définira le formulaire.fieldName. $ Error.fieldName attribut true. Donc, ce champ devient invalid .

Si vous cochez la valeur de form.fieldName. $ ModelValue à l'intérieur du contrôleur, vous le trouverez comme undefined .

Ainsi, le réglage du modèle sur «indéfini» dans le contrôleur, lorsque le champ est déjà invalide, ne change rien.

Mais si vous le définissez comme null ou "" cela fonctionnera comme $modelValue et $viewValue tous les deux sont modifiés, ce qui rend le champ à nouveau valide.

J'espère que cela a permis de comprendre. Merci.

Ajouter ng-model-options = "{allowInvalid: true}" dans le champ de saisie

Ensuite, essayez de définir ng-model à undefined, espérons que le formulaire / entrée sera valide à nouveau

Voir: https://docs.angularjs.org/api/ng/directive/ngModelOptions