web-dev-qa-db-fra.com

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

Utiliser le plugin TokenInput et utiliser la validation formController intégrée à AngularJS.

À l'heure actuelle, j'essaie de vérifier si le champ contient du texte, puis de le définir comme valide si c'est le cas. Le problème avec l'utilisation du plugin est qu'il crée sa propre entrée puis un ul + li pour stlying.

J'ai accès à addItem (nomformule) et à mes capacités dans le contrôleur, il me suffit de le définir sur $ valide.

Balisage.

<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 capacityValidation lorsque TokenInput a saisi et transmis quelque chose.

EDIT:

Connaître ng-model sur mon entrée crée des données et obtient les résultats de la saisie semi-automatique. C'est pourquoi je ne peux pas utiliser ng-valid pour fonctionner car il est basé sur le modèle.

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

Je n'ai pas écrit cette implémentation autocomplète. Y a-t-il un autre moyen de faire cela si je pouvais accéder au modèle ng et déplacer la fonction de modèle ailleurs?

javascriptvalidationangularjs
89
Christopher Marshall

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 est de définir la validité de l'élément d'entrée. Ainsi;

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

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

addItem.capabilities.errors.youAreFat == true;
144
Umur Kontacı

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

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

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

Je suis tombé sur ce post avec un problème similaire. Ma solution était d'ajouter un champ caché pour conserver mon état non valide pour moi.

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

Dans mon cas, j'avais un booléen nullable dans lequel une personne devait sélectionner l'un des deux boutons différents. s'ils répondent oui, une entité est ajoutée à la collection et l'état du bouton change. Tant que toutes les questions ne sont pas répondues (le clic de 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>
18
James Fleming

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 une exigence différente. Frapper si cela résout votre problème.

2
rahim.nagori