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

angularjs setvalidity
angularjs get form data in controller
angularjs error message popup
angularjs input types
angularjs email validation in controller
angularjs form validation on submit
angularjs custom validation
ng-valid

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?

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;

form.FormController, Input elements using ngModelController do this automatically when they are linked. Change the validity state of the form, and notify the parent form (if any). Questions: 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)

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

angular: manually set a form field to invalid via $setValidity(), Everything you should know about validation and errors in AngularJS apps: Validating user input and showing errors - is one of the most common WEB app features. and brute-force validation approach is manual controller-based validation: Moreover form itself exposes similar properties: $pristine / $dirty , $​valid  In the passwordRepeat case this would not work, right..: if password and passwordRepeat do not match, the field is not required and hence the form is valid, which it should NOT be. – Onestone Oct 28 '14 at 9:58

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>

Validation and Error Handling in AngularJS Applications, So for explain how to use angularjs validation features, i will begin with <span class="glyphicon glyphicon-ok form-control-feedback" next thing you need to do — is to set name and ng-model property of each input: Yes, as you may already figured out — when nm field is valid its parent div will get has-success class. How can I either disable the default ng-valid or identify a condition where the value is being populated by the controller? Answer: I think you should use ng-dirty/pristine. You can manually set the condition of the form as the user navigates. When you populate your form data you can do something like:

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.

Angularjs And Forms Validation - Moshe Vilner, Angular Form Properties $valid, $invalid, $pristine, $dirty They give us various information about a form or its inputs and are applied to a form and inputs. form * app.js Our Angular application and controller (barely any code at all) Now the form only shows errors if the submitted variable is set to true . Test if the value contains the letter "e", and set the validity of the model controller to either true or false. At last, mCtrl.$parsers.push(myValidation); will add the myValidation function to an array of other functions, which will be executed every time the input value changes.

AngularJS Form Validation ― Scotch.io, Back; JUnit · LoadRunner · Manual Testing · Mobile Testing · Mantis · Postman · QTP The registration page would have input fields for username, $valid, $​invalid, $pristine; Form validation using AngularJS Auto When the submit button is pressed, the submitting variable in the controller is set to true. I need to set ng-form as invalid in the start, as it is a later part of a wizard. The form contains a grid with elements. Each element has its own validation, but the issue is that when there are no elements the form shows as valid.

AngularJS Form Validation: TextBox, Button Click [Example], pristine – gives a status about the “cleanness” of the form; true if no control was modified The “Register” button is enabled only if all inputs are valid and, once clicked, Template-driven forms are very similar to the forms in AngularJS (or Angular 1, Angular 4 already offers a set of common validators like: required  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'):

Angular 4 Forms: Nesting and Input Validation, AngularJS monitors the state of the form and input fields (input, textarea, select), You can use standard HTML5 attributes to validate input, or you can make your the letter "e", and set the validity of the model controller to either true or false . AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVC, dependency injection and great testability story all implemented with pure client-side JavaScript!

Comments
  • 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?
  • 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.
  • I Shortened the markup on purpose to isolate the input. I have a bunch more inputs in this same form.
  • Okay. Did you try addItem.capabilities.$valid = true and/or setting addItem.capabilities.$error.required to true or false as appropriate?
  • 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.
  • 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 :/
  • 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
  • I found the solution but this was what I meant : $scope.addItem['myVariableName'].$setValidity("youAreFat", false);
  • After this it appears that some input fields are not validates anymore on change or blur
  • On angular 1.4.7 and I had to prefix this code with $scope.. $scope.addItem.capabilities.$setValidity("youAreFat", false);
  • 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 you'll need to invoke $setValidity with true as the second parameter whenever the input is valid.
  • doesn't make sense to be using rootscope, should just be scope
  • 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.