AngularJS : Comment définir manuellement l'entrée à $valid dans le contrôleur ?

Question

Utilisation de la TokenInput et en utilisant la validation intégrée du formController d'AngularJS.

Pour l'instant, j'essaie de vérifier si le champ contient du texte et, si c'est le cas, de le rendre valide. Le problème avec l'utilisation du plugin est qu'il crée sa propre entrée et ensuite un ul+li pour la mise en évidence.

J'ai accès à addItem (formname) et à mes capacités dans le contrôleur, j'ai juste besoin de le définir sur $valid.

Markup.

<form class="form-horizontal add-inventory-item" name="addItem">
     <input id="capabilities" name="capabilities" token-input data-ng-model="inventoryCapabilitiesAutoComplete" data-on-add="addCapability()" data-on-delete="removeCapability()" required>
     <div class="required" data-ng-show="addItem.capabilities.$error.required" title="Please enter capability."></div>
</form>

JS.

$scope.capabilityValidation = function (capability) {
  if (capability.name !== "") {
    addItem.capabilities.$valid = true;
    addItem.capabilities.$error.required = false;
  } else {
    addItem.capabilities.$valid = false;
    addItem.capabilities.$error.required = true;
  }
};

J'exécute la fonction capabilityValidation lorsque le TokenInput contient quelque chose et je passe l'objet.

EDITAR:

J'ai découvert que ng-model sur mon entrée fait des choses et obtient les résultats de la saisie automatique, c'est pourquoi je ne peux pas faire fonctionner ng-valid puisqu'il est basé sur le modèle.

$scope.inventoryCapabilitiesAutoComplete = {
  options: {
    tokenLimit: null
  },
  source: urlHelper.getAutoComplete('capability')
};

Je n'ai pas écrit cette implémentation de l'autocomplétion, y a-t-il une autre façon de le faire où j'aurais accès à l'attr ng-model et où je déplacerais la fonction modèle ailleurs ?

Answer 1

Vous ne pouvez pas modifier directement la validité d'un formulaire. Si toutes les entrées descendantes sont valides, le formulaire est valide, sinon, il ne l'est pas.

Ce que vous devez faire, c'est définir la validité de l'élément de saisie. Comme ceci ;

addItem.capabilities.$setValidity("youAreFat", false);

Maintenant, l'entrée (et donc le formulaire) est invalide. Vous pouvez également voir quelle erreur provoque l'invalidation.

addItem.capabilities.errors.youAreFat == true;

Answer 2

Les réponses ci-dessus ne m'ont pas aidé à résoudre mon problème. Après une longue recherche, je suis tombé sur ceci solution partielle .

J'ai finalement résolu mon problème avec ce code pour définir manuellement le champ de saisie en ng-invalid (pour définir ng-valid, définissez-le à 'true') :

$scope.myForm.inputName.$setValidity('required', false);

Answer 3

Je suis tombé sur ce post avec un problème similaire. Ma solution a été d'ajouter un champ caché pour conserver l'état invalide pour moi.

<input type="hidden" ng-model="vm.application.isValid" required="" />

Dans mon cas, j'avais un bool nullable qu'une personne devait sélectionner parmi deux boutons différents. Si elle répond oui, une entité est ajoutée à la collection et l'état du bouton change. Tant qu'il n'y a pas de réponse à toutes les questions (un clic sur l'un des boutons de chacune des paires), le formulaire n'est pas valide.

vm.hasHighSchool = function (attended) { 
  vm.application.hasHighSchool = attended;
  applicationSvc.addSchool(attended, 1, vm.application);
}

<input type="hidden" ng-model="vm.application.hasHighSchool" required="" />
<div class="row">
  <div class="col-lg-3"><label>Did You Attend High School?</label><label class="required" ng-hide="vm.application.hasHighSchool != undefined">*</label></div>
  <div class="col-lg-2">
    <button value="Yes" title="Yes" ng-click="vm.hasHighSchool(true)" class="btn btn-default" ng-class="{'btn-success': vm.application.hasHighSchool == true}">Yes</button>
    <button value="No" title="No" ng-click="vm.hasHighSchool(false)" class="btn btn-default" ng-class="{'btn-success':  vm.application.hasHighSchool == false}">No</button>
  </div>
</div>

Answer 4

C'est très simple. Par exemple : dans votre contrôleur JS, utilisez ceci :

$scope.inputngmodel.$valid = false;

ou

$scope.inputngmodel.$invalid = true;

ou

$scope.formname.inputngmodel.$valid = false;

ou

$scope.formname.inputngmodel.$invalid = true;

Tout fonctionne pour moi pour différentes exigences. Contactez-moi si cela résout votre problème.

Answer 5

Pour que cela fonctionne pour une erreur de date, j'ai dû supprimer l'erreur avant d'appeler $setValidity pour que le formulaire soit marqué comme valide.

delete currentmodal.form.$error.date;
currentmodal.form.$setValidity('myDate', true);