Angular is automatically adding ng-invalid class on required fields

Question

I am building an angular app for which I have some forms set up  I have some fields that are required to be filled before submission  Therefore I have added  required  on them    lt input type  text  class  form-control  placeholder  Test  ng-model  data test  required gt    However when I launch my app  the fields are displayed as  invalid  and the classes  ng-invalid  and  ng-invalid-required  even before the submit button has been click or before the user has typed anything in the fields   How can I make sure that thoses 2 classes are not added immediately but either once the user has submitted the form or when he has typed something wrong in the corresponding field

User · Answer

Thanks to this post  I use this style to remove the red border that appears automatically with bootstrap when a required field is displayed  but user didn t have a chance to input anything already   input ng-pristine ng-invalid       -webkit-box-shadow  none      -ms-box-shadow  none      box-shadow none

User · Answer

Try to add the class for validation dynamically  when the form has been submitted or the field is invalid  Use the form name and add the  name  attribute to the input  Example with Bootstrap    lt div class  form-group  ng-class    has-error   myForm  submitted  amp  amp   myForm username  invalid  amp  amp   myForm username  pristine    gt       lt label class  col-sm-2 control-label  for  username  gt Username  lt  label gt       lt div class  col-sm-10 col-md-9  gt           lt input ng-model  data username  id  username  name  username  type  text  class  form-control input-md  required gt       lt  div gt   lt  div gt    It is also important  that your form has the ng-submit    attribute    lt form name  myForm  ng-submit  checkSubmit    novalidate gt    lt  -- input fields here -- gt            lt button type  submit  gt Submit lt  button gt   lt  form gt    You can also add an optional function for validation to the form     within your controller  some extras       scope checkSubmit   function          if   scope myForm  valid            alert  All good         next step           else           alert  Not all fields valid  Do something                   Now  when you load your app the class  has-error  will only be added when the form is submitted or the field has been touched   Instead of   myForm username  pristine  You could also use  myForm username  dirty

User · Answer

Since the fields are empty they are not valid  so the ng-invalid and ng-invalid-required classes are added properly   You can use the class ng-pristine to check out whether the fields have already been used or not

User · Answer

the accepted answer is correct   for mobile you can also use this  ng-touched rather ng-dirty   input ng-invalid ng-touched    border-bottom  1px solid  e74c3c  important

User · Answer

Since the inputs are empty and therefore invalid when instantiated  Angular correctly adds the ng-invalid class   A CSS rule you might try   input ng-dirty ng-invalid     color  red     Which basically states when the field has had something entered into it at some point since the page loaded and wasn t reset to pristine by  scope formName setPristine true  and something wasn t yet entered and it s invalid then the text turns red   Other useful classes for Angular forms  see input for future reference    ng-valid-maxlength - when ng-maxlength passes ng-valid-minlength - when ng-minlength passes ng-valid-pattern - when ng-pattern passes ng-dirty - when the form has had something entered since the form loaded ng-pristine - when the form input has had nothing inserted since loaded  or it was reset via setPristine true  on the form  ng-invalid - when any validation fails  required  minlength  custom ones  etc     Likewise there is also ng-invalid- lt name gt  for all these patterns and any custom ones created

[javascript] Angular is automatically adding 'ng-invalid' class on 'required' fields

Examples related to javascript

Examples related to forms

Examples related to angularjs

Examples related to required