AngularJS: How to manually set the input to $ valid in the controller?

Question

Using the TokenInput plugin and using the built-in check of the built-in formController in AngularJS format.

I'm currently trying to check if the field contains text, and then sets the valid field, if any. The problem with using the plugin is that it creates its own input, and then ul + li.

I have access to addItem (formname) and my capabilities in the controller, I just need to set it to $ valid.

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

I run the functionValidation function when TokenInput has something injected and passing an object.

EDIT:

The ng model found at my input does things and gets autocomplete results, so I can't get ng-valid to work because it is based on the model.

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

I did not write this autocomplete implementation, is there any other way to do this when I have access to the ng-model attr and move the model function somewhere else?

Answer 1

You cannot directly change the form. If all inputs of the descendants are valid, the form is valid, if not, then this is not so.

What needs to be done is to establish the correctness of the input element. In this way,

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

Now the input (and therefore the form) is invalid. You can also see which error is invalidating.

 addItem.capabilities.errors.youAreFat == true; 

Answer 2

The answers above did not help me solve my problem. After a long search, I came across this private solution .

I finally solved my problem with this code in order to set the input field manually to ng-invalid (to set the ng-valid value, set it to "true"):

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

Answer 3

I ran into this post with a similar problem. My fix was to add a hidden field to store my invalid state for me.

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

In my case, I had a nullable bool, which a person had to choose one of two different buttons. if they answer yes, the object is added to the collection, and the state of the button changes. Until all questions are answered (one of the buttons in each of the pairs has a click), the form is invalid.

 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>