93

Using the TokenInput plugin and using AngularJS built-in formController validation.

Right now I'm trying to check if the field contains text, and then set field to valid if it does. The issue with using the plugin is it creates it's own input and then a ul+li for stlying.

I have access to addItem (formname) and my capablities 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'm running the capabilityValidation function when TokenInput has something entered and passing in the object.

EDIT:

Found out ng-model on my input does stuff and gets the autocomplete results, which is why I can't get ng-valid to work since it's based on the model.

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

I didn't write this autocomplete implementation, is there another way to do this where I would have access to the ng-model attr and move the model function somewhere else?

13
  • 1
    Since your plugin is creating its own input, and you have write a function to do your own validation, why not just use your own $scope property for validation too: <div ... data-ng-show="capabilities_error" ...> In other words, is there a reason you want/need to use FormController? Mar 15, 2013 at 16:36
  • 2
    Since all my other forms are using it I'd like to keep the control it gives. The plugin created input actually sets the value in my original input, which I then need to check against in my validation but it doesn't update the formController when there's an inputted value. Mar 15, 2013 at 16:39
  • I Shortened the markup on purpose to isolate the input. I have a bunch more inputs in this same form. Mar 15, 2013 at 16:39
  • 1
    Okay. Did you try addItem.capabilities.$valid = true and/or setting addItem.capabilities.$error.required to true or false as appropriate? Mar 15, 2013 at 16:44
  • I tried both of those. I'll update my question to show you. The $valid and $error.required shows as undefined on my breakpoint in the controller but addItem.capabilities still has data. Mar 15, 2013 at 17:27

5 Answers 5

154

You cannot directly change a form's validity. If all the descendant inputs are valid, the form is valid, if not, then it is not.

What you should do is to set the validity of the input element. Like so;

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

Now the input (and so the form) is invalid. You can also see which error causes invalidation.

addItem.capabilities.errors.youAreFat == true;
7
  • 1
    What if capabilities is a variable? I have an array that contains input names and I want to loop inside the array and set them invalid one by one :/
    – lightalex
    Jul 25, 2014 at 7:31
  • 1
    What do you mean by variable? It is directly tied to the form itself, not the values in the form. It uses form's name attribute and input's id attribute. This is different from the values set by ngModel Jul 25, 2014 at 19:15
  • 11
    I found the solution but this was what I meant : $scope.addItem['myVariableName'].$setValidity("youAreFat", false);
    – lightalex
    Jul 28, 2014 at 6:07
  • After this it appears that some input fields are not validates anymore on change or blur
    – Leonardo
    Nov 20, 2015 at 17:04
  • 4
    On angular 1.4.7 and I had to prefix this code with $scope.. $scope.addItem.capabilities.$setValidity("youAreFat", false);
    – Graham T
    Feb 3, 2016 at 16:07
62

The answers above didn't help me solve my problem. After a long search I bumped into this partial solution.

I've finally solved my problem with this code to set the input field manually to ng-invalid (to set to ng-valid set it to 'true'):

$scope.myForm.inputName.$setValidity('required', false);
4
  • 3
    I did the same thing and it works greate. But now i have some problems of revalidating the same field. It does not change to the changed state, which is very anoying. I use ng-model-options="{ updateOn: 'submit' }" to validate on click to a button. Any thoughts on this?
    – OliverKK
    Sep 10, 2014 at 12:11
  • 1
    @OliverKK you'll need to invoke $setValidity with true as the second parameter whenever the input is valid. Aug 25, 2015 at 14:26
  • 10
    doesn't make sense to be using rootscope, should just be scope
    – Ryan M
    Jun 6, 2016 at 18:49
  • 1
    I tried similar solution, but the problem I found is that if I then try to change the value of the control in the form, it remains invalid. In my case that control is a directive with the inner select. If I set the invalid for my directive (which is ng-form), then I'm unable to remove that invalid status.
    – Naomi
    Jul 12, 2018 at 21:53
19

I came across this post w/a similar issue. My fix was to add a hidden field to hold 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 select one of two different buttons. if they answer yes, an entity is added to the collection and the state of the button changes. Until all of the questions get answered, (one of the buttons in each of the pairs has a click) the form is not valid.

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>
1
  • Thank you - feels hacky but exactly what I was expected :) Aug 15, 2022 at 17:35
2

It is very simple. For example : in you JS controller use this:

$scope.inputngmodel.$valid = false;

or

$scope.inputngmodel.$invalid = true;

or

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

or

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

All works for me for different requirement. Hit up if this solve your problem.

0

to get this working for a date error I had to delete the error first before calling $setValidity for the form to be marked valid.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.