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

Verwendung der TokenInput Plugin und die Verwendung der integrierten formController-Validierung von AngularJS.

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

Ich habe Zugriff auf addItem (formname) und meine Fähigkeiten im Controller, ich muss es nur auf $valid setzen.

Markierung.

<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 hat und das Objekt übergibt.

BEARBEITEN:

Ich habe herausgefunden, dass ng-model bei meiner Eingabe Dinge tut und die Ergebnisse der automatischen Vervollständigung erhält, weshalb ich ng-valid nicht zum Laufen 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, bei der ich Zugriff auf das ng-model-Attribut hätte und die Modellfunktion an eine andere Stelle 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, dann nicht.

Was Sie tun sollten, ist die Gültigkeit des Eingabeelements festzulegen. So;

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

Jetzt ist die Eingabe (und damit das Formular) ungültig. Sie können auch sehen, welcher Fehler zur Invalidierung führt.

addItem.capabilities.errors.youAreFat == true;

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

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

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

Ich bin auf diesen Beitrag mit einem ähnlichen Problem gestoßen. Meine Lösung 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 nullable bool, mit 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 nicht gü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. Zum 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;

Alle Arbeiten für mich für unterschiedliche Anforderung. Schlagen Sie zu, wenn dies Ihr Problem löst.

Damit dies bei einem Datumsfehler funktioniert, musste ich den Fehler zuerst löschen, bevor ich $setValidity aufrief, damit das Formular als gültig markiert wurde.

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