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

Utilisation de TokenInput plugin et utilisation de la validation formController intégrée à AngularJS.

En ce moment, j'essaie de vérifier si le champ contient du texte, puis définissez le champ sur 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 (formname) et à mes capacités dans le contrôleur, il me suffit de le définir sur $ valid.

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 quelque chose entré et passant dans l'objet.

ÉDITER:

J'ai découvert que ng-model sur mon entrée fait des choses et obtient les résultats de la saisie semi-automatique, c'est pourquoi je ne peux pas faire fonctionner ng-valid 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 de saisie semi-automatique, y a-t-il un autre moyen de le faire où j'aurais accès à l'attr ng-model et déplacer la fonction de modèle ailleurs?

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 provoque l'invalidation.

addItem.capabilities.errors.youAreFat == true;

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 enfin 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);

Je suis tombé sur ce post avec un problème similaire. Ma solution consistait à ajouter un champ caché pour conserver mon é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 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 n'ont pas obtenu de réponse (l'un des boutons de chacune des paires a un clic), 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>

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 des exigences différentes. Frappez si cela résout votre problème.