javascript - pristine - AngularJS: ¿Cómo configuro manualmente la entrada a $ valid in controller?

submit validation angularjs

Question

Usar el complemento TokenInput y usar la validación formController incorporada de AngularJS.

En este momento estoy tratando de verificar si el campo contiene texto, y luego establecer campo válido si lo hace. El problema con el uso del plugin es que crea su propia entrada y luego un ul + li para stlying.

Tengo acceso a addItem (formname) y mis capacidades en el controlador, solo necesito configurarlo en $ valid.

Margen.

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

Estoy ejecutando la función de validación de la capacidad cuando TokenInput tiene algo ingresado y pasando el objeto.

EDITAR:

El ng-model descubierto en mi entrada hace cosas y obtiene los resultados de autocompletar, por lo que no puedo hacer que ng-valid funcione, ya que está basado en el modelo.

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

No escribí esta implementación de autocompletar, ¿hay alguna otra forma de hacer esto donde tenga acceso al attr ng-model y mover la función del modelo a otro lugar?

Answer 1

Las respuestas anteriores no me ayudaron a resolver mi problema. Después de una larga búsqueda, me topé con esta solución parcial .

Finalmente resolví mi problema con este código para establecer el campo de entrada manualmente en ng-invalid (para establecerlo en ng-valid establécelo en ''true''):

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

Answer 2

Me encontré con esta publicación con un problema similar. Mi solución fue agregar un campo oculto para mantener mi estado no válido para mí.

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

En mi caso, tenía un boole nullable que una persona tenía que seleccionar uno de dos botones diferentes. si responden sí, se agrega una entidad a la colección y cambia el estado del botón. Hasta que todas las preguntas sean respondidas, (uno de los botones en cada uno de los pares tiene un clic) el formulario no es válido.

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 3

No puede cambiar directamente la validez de un formulario. Si todas las entradas descendientes son válidas, la forma es válida, si no, entonces no lo es.

Lo que debe hacer es establecer la validez del elemento de entrada. Al igual que;

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

Ahora la entrada (y por lo tanto el formulario) no es válida. También puede ver qué error causa la invalidación.

addItem.capabilities.errors.youAreFat == true;