AngularJS How do I manually set input to valid in controller

Question

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    lt form class  form-horizontal add-inventory-item  name  addItem  gt        lt input id  capabilities  name  capabilities  token-input data-ng-model  inventoryCapabilitiesAutoComplete  data-on-add  addCapability    data-on-delete  removeCapability    required gt        lt div class  required  data-ng-show  addItem capabilities  error required  title  Please enter capability   gt  lt  div gt   lt  form gt    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

User · Answer

I came across this post w a similar issue  My fix was to add a hidden field to hold my invalid state for me    lt input type  hidden  ng-model  vm application isValid  required      gt    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        lt input type  hidden  ng-model  vm application hasHighSchool  required      gt   lt div class  row  gt     lt div class  col-lg-3  gt  lt label gt Did You Attend High School  lt  label gt  lt label class  required  ng-hide  vm application hasHighSchool    undefined  gt   lt  label gt  lt  div gt     lt div class  col-lg-2  gt       lt button value  Yes  title  Yes  ng-click  vm hasHighSchool true   class  btn btn-default  ng-class    btn-success   vm application hasHighSchool    true   gt Yes lt  button gt       lt button value  No  title  No  ng-click  vm hasHighSchool false   class  btn btn-default  ng-class    btn-success    vm application hasHighSchool    false   gt No lt  button gt     lt  div gt   lt  div gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to javascript

Examples related to validation

Examples related to angularjs