How can I manually set an Angular form field as invalid

Question

I am working on a login form and if the user enters invalid credentials we want to mark both the email and password fields as invalid and display a message that says the login failed  How do I go about setting these fields to be invalid from an observable callback     Template    lt form  loginForm  ngForm   ngSubmit   login loginForm   id  loginForm  gt     lt div class  login-content  fxLayout  column  fxLayoutAlign  start stretch  gt       lt md-input-container gt         lt input mdInput placeholder  Email  type  email  name  email  required   ngModel    email  gt       lt  md-input-container gt       lt md-input-container gt         lt input mdInput placeholder  Password  type  password  name  password  required   ngModel    password  gt       lt  md-input-container gt       lt p class  error   ngIf  loginFailed  gt The email address or password is invalid  lt  p gt       lt div class  extra-options  fxLayout  row  fxLayoutAlign  space-between center  gt        lt md-checkbox class  remember-me  gt Remember Me lt  md-checkbox gt         lt a class  forgot-password  routerLink   forgot-password  gt Forgot Password  lt  a gt       lt  div gt       lt button class  login-button  md-raised-button  disabled    loginForm valid  gt SIGN IN lt  button gt        lt p class  note  gt Don t have an account  lt br  gt   lt a  routerLink      register    gt Click here to create one lt  a gt  lt  p gt      lt  div gt    lt  form gt    Login method       ViewChild  loginForm   loginForm  HTMLFormElement    private login formData  any   void       this authService login formData  subscribe res   gt          alert  Congrats  you have logged in  We don t have anywhere to send you right now though  but congrats regardless            error   gt          this loginFailed   true     This displays the error message  I don t really like this  but that s another issue        this loginForm controls email invalid   true        this loginForm controls password invalid   true                 In addition to setting the inputs invalid flag to true I ve tried setting the email valid flag to false  and setting the loginForm invalid to true as well  None of these cause the inputs to display their invalid state

User · Answer

Though its late but following solution worked form me       let control   this registerForm controls  controlName        control setErrors  backend   someProp   Invalid Data          let message   control errors  backend   someProp

User · Answer

I was trying to call setErrors   inside a ngModelChange handler in a template form   It did not work until I waited one tick with setTimeout     template    lt input type  password    ngModel    user password  class  form-control    id  password  name  password  required  ngModelChange   checkPasswords    gt    lt input type  password    ngModel    pwConfirm  class  form-control   id  pwConfirm  name  pwConfirm  required  ngModelChange   checkPasswords      pwConfirmModel  ngModel  gt    lt div  hidden   pwConfirmModel valid    pwConfirmModel pristine  class  alert-danger  gt     Passwords do not match  lt  div gt    component    ViewChild  pwConfirmModel   pwConfirmModel  NgModel   checkPasswords       if  this pwConfirm length  gt   this user password length  amp  amp        this pwConfirm     this user password        console log  passwords do not match           setErrors   must be called after change detection runs     setTimeout      gt  this pwConfirmModel control setErrors   nomatch   true          else          to clear the error  we don t have to wait     this pwConfirmModel control setErrors null           Gotchas like this are making me prefer reactive forms

User · Answer

Adding to Julia Passynkova s answer  To set validation error in component   formData form controls  email   setErrors   incorrect   true      To unset validation error in component   formData form controls  email   setErrors null     Be careful with unsetting the errors using null as this will overwrite all errors  If you want to keep some around you may have to check for the existence of other errors first   if  isIncorrectOnlyError      formData form controls  email   setErrors null

User · Answer

Here is an example that works   MatchPassword AC  FormControl      let dataForm   AC parent    if  dataForm  return null     var newPasswordRepeat   dataForm get  newPasswordRepeat      let password   dataForm get  newPassword   value    let confirmPassword   newPasswordRepeat value     if password    confirmPassword           for newPasswordRepeat from current field  newPassword         dataForm controls  newPasswordRepeat   setErrors   MatchPassword  true         if  newPasswordRepeat    AC              for current field  newPasswordRepeat           return  newPasswordRepeat   MatchPassword  true               else       dataForm controls  newPasswordRepeat   setErrors  null          return null     createForm       this dataForm   this fb group       password        Validators required        newPassword          Validators required  Validators minLength 6   this MatchPassword         newPasswordRepeat         Validators required  this MatchPassword

User · Answer

in component   formData form controls  email   setErrors   incorrect   true      and in HTML    lt input mdInput placeholder  Email  type  email  name  email  required   ngModel    email    email  ngModel  gt   lt div  ngIf   email valid  gt   email errors  json   lt  div gt

User · Answer

You could also change the viewChild  type  to NgForm as in     ViewChild  loginForm   loginForm  NgForm    And then reference your controls in the same way  Julia mentioned     private login formData  any   void       this authService login formData  subscribe res   gt          alert  Congrats  you have logged in  We don t have anywhere to send you right now though  but congrats regardless            error   gt          this loginFailed   true     This displays the error message  I don t really like this  but that s another issue         this loginForm controls  email   setErrors    incorrect   true          this loginForm controls  password   setErrors    incorrect   true                  Setting the Errors to null will clear out the errors on the UI    this loginForm controls  email   setErrors null

User · Answer

In new version of material 2 which its control name starts with mat prefix setErrors   doesn t work  instead Juila s answer can be changed to   formData form controls  email   markAsTouched

User · Answer

For unit test   spyOn component form   valid   and returnValue true

User · Answer

In my Reactive form  I needed to mark a field as invalid if another field was checked  In ng version 7 I did the following       const checkboxField   this form get   lt name of field gt         const dropDownField   this form get   lt name of field gt          this checkboxField    checkboxField valueChanges          subscribe  checked  boolean    gt                if checked                    dropDownField setValidators Validators required                   dropDownField setErrors   required  true                     dropDownField markAsDirty                  else                   dropDownField clearValidators                    dropDownField markAsPristine                                So above  when I check the box it sets the dropdown as required and marks it as dirty  If you don t mark as such it then it won t be invalid  in error  until you try to submit the form or interact with it    If the checkbox is set to false  unchecked  then we clear the required validator on the dropdown and reset it to a pristine state   Also - remember to unsubscribe from monitoring field changes

[validation] How can I manually set an Angular form field as invalid?

Examples related to validation

Examples related to angular

Examples related to angular2-forms