AngularJS: Wie setze ich die Eingabe im Controller manuell auf $ valid?

Verwenden des TokenInput- Plugins und der in AngularJS integrierten formController-Validierung.

Im Moment versuche ich zu überprüfen, ob das Feld Text enthält, und setze das Feld dann auf gültig, wenn dies der Fall ist. Das Problem bei der Verwendung des Plugins ist, dass es eine eigene Eingabe und dann eine ul + li zum Festhalten erstellt.

Ich habe Zugriff auf addItem (Formularname) und meine Funktionen im Controller. Ich muss es nur auf $ valid setzen.

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;
  }
};

Ich führe die CapabilityValidation-Funktion aus, wenn TokenInput etwas eingegeben und in das Objekt übergeben hat.

BEARBEITEN:

Ich habe herausgefunden, dass ng-model in meiner Eingabe Dinge tut und die Ergebnisse der automatischen Vervollständigung erhält, weshalb ich ng-valid nicht zum Arbeiten bringen kann, da es auf dem Modell basiert.

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

Ich habe diese Autocomplete-Implementierung nicht geschrieben. Gibt es eine andere Möglichkeit, dies zu tun, wenn ich Zugriff auf das ng-model attr hätte und die Modellfunktion an einen anderen Ort verschieben würde?

Sie können die Gültigkeit eines Formulars nicht direkt ändern. Wenn alle untergeordneten Eingaben gültig sind, ist das Formular gültig. Wenn nicht, ist dies nicht der Fall.

Sie sollten die Gültigkeit des Eingabeelements festlegen. Wie so;

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

Jetzt ist die Eingabe (und damit das Formular) ungültig. Sie können auch sehen, welcher Fehler die Ungültigmachung verursacht.

addItem.capabilities.errors.youAreFat == true;

Die obigen Antworten haben mir nicht geholfen, mein Problem zu lösen. Nach langer Suche bin ich auf diese Teillösung gestoßen .

Ich habe endlich mein Problem mit diesem Code gelöst, um das Eingabefeld manuell auf ng-invalid zu setzen (um es auf ng-valid zu setzen, setzen Sie es auf 'true'):

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

Ich bin auf diesen Beitrag mit einem ähnlichen Problem gestoßen. Mein Fix bestand darin, ein verstecktes Feld hinzuzufügen, um meinen ungültigen Status für mich zu speichern.

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

In meinem Fall hatte ich einen nullbaren Bool, bei dem eine Person eine von zwei verschiedenen Schaltflächen auswählen musste. Wenn sie mit Ja antworten, wird der Sammlung eine Entität hinzugefügt, und der Status der Schaltfläche ändert sich. Bis alle Fragen beantwortet sind (eine der Schaltflächen in jedem der Paare hat einen Klick), ist das Formular ungültig.

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>

Es ist sehr einfach. Beispiel: Verwenden Sie in Ihrem JS-Controller Folgendes:

$scope.inputngmodel.$valid = false;

oder

$scope.inputngmodel.$invalid = true;

oder

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

oder

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

Alles funktioniert für mich für unterschiedliche Anforderungen. Schlagen Sie zu, wenn dies Ihr Problem löst.