Angular form validation how to show error message on submit

Question

I have a form as follows :

<form [formGroup]="editProfileForm">
    <input type="text" id="name" class="form-control" placeholder="First" formControlName="firstName [(ngModel)]="profileDetails.first_name">
    <small class="text-danger" [hidden]="editProfileForm.controls['firstName'].valid || (editProfileForm.controls['firstName'].pristine && !submitted)">First name Required</small>
    <input type="text" class="form-control" placeholder="Last" formControlName="lastName" [(ngModel)]="profileDetails.last_name">
    <small class="text-danger" [hidden]="editProfileForm.controls['lastName'].valid || (editProfileForm.controls['lastName'].pristine && !submitted)">Last name Required</small>
    <button class="save-changes-btn" [disabled]="(!editProfileForm.valid)" (click)="saveDetails();">Save Changes</button>
</form>

and the editProfile is defined in the component file as

this.editProfileForm = this.formBuilder.group({
    firstName: [_.get(this.profileDetails, 'first_name', ''), Validators.required],
    lastName: [_.get(this.profileDetails, 'last_name', ''), Validators.required],
});

Now I need to show the validation messages on clicking the submit button. Here now I have disabled the submit button if, the form is not valid. But it will not show the error messages near to the corresponding fields and this will makes the user thinks that the there is nothing happening. How can I trigger the error messages to show near corresponding input fields ?

esteuart · Accepted Answer · 2021-07-11 21:44:14Z

32

When saving, if the form is not valid, simply call markAllAsTouched() on the form group.

saveDetails() {
  if(!this.editProfileForm.valid) {
    this.editProfileForm.markAllAsTouched();
  }
}

answered Jul 11, 2021 at 21:44

esteuart

1,4332 gold badges13 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Lucke Over a year ago

for me this sounds pretty logic.

Goran Over a year ago

I logged in only to upvote this answer. This should be marked as answer and proper way to show errors after submit.

Bronek Over a year ago

Perfect, bingo :)

Marcel Over a year ago

doesnt work for child components with form from parents

Mike Bovenlander Over a year ago

Small side-note: There is also a invalid property on forms which makes reading the code easier: if(this.editProfileForm.invalid) {

Anuradha Gunasekara · Accepted Answer · 2018-09-10 09:33:20Z

14

You can do something like this.

First remove the disabling logic in the submit button.

In component template.

<form [formGroup]="editProfileForm" (ngSubmit)="onSubmit()">
  <div class="form-group block" [ngClass]="{'has-error': submitted && (editProfileForm.controls.firstName.errors)}">
    <label>Email</label>
    <input type="text" class="form-control" formControlName="firstName">
    <p>
      <span *ngIf="submitted && editProfileForm.controls.firstName.errors?.required">First name is required</span>
    </p>
  </div>

  // other controls
</form>

In component class

public onSubmit(): void {
  this.submitted = true;
  if(!this.editProfileForm.valid) {
    return;
  }

  // make the submitted variable false when submission is completed.

}

you can remove following part if you need to.

[ngClass]="{'has-error': submitted && (editProfileForm.controls.firstName.errors)}"

It will add css class to the element when the form control is invalid and submitted.

answered Sep 10, 2018 at 9:33

Anuradha Gunasekara

7,0132 gold badges29 silver badges37 bronze badges

3 Comments

Sergey Glazirin Over a year ago

This construction editProfileForm.controls.firstName.errors?.required is not very well written , since the get() method is used to access form controls, the hasError() method is also used for errors. Better use editProfileForm.get('firstName').hasError('required')

Skeird Over a year ago

Instead of adding a new property to your class you can add a template variable on your form and use it to check if the form was submitted. This solution is described by this post

Sb Zakaria Over a year ago

thank you ! i was facing that issue and solved it thanks to your answer !

Pochmurnik · Accepted Answer · 2019-11-05 14:51:50Z

9

Use showValidationMsg() method and pass the form group as parameter inside submit button method:

showValidationMsg(formGroup: FormGroup) {

    for (const key in formGroup.controls) {
        if (formGroup.controls.hasOwnProperty(key)) {
            const control: FormControl = <FormControl>formGroup.controls[key];

            if (Object.keys(control).includes('controls')) {
                const formGroupChild: FormGroup = <FormGroup>formGroup.controls[key];
                this.showValidationMsg(formGroupChild);
            }

            control.markAsTouched();
        }
    }
}

edited Nov 5, 2019 at 14:51

Pochmurnik

8286 gold badges21 silver badges39 bronze badges

answered Nov 5, 2019 at 13:55

kuldeep chopra

81212 silver badges12 bronze badges

1 Comment

ukie Over a year ago

worked perfectly for me with Angular Material and FormGroup. thank you!

Collectives™ on Stack Overflow

Angular form validation how to show error message on submit

3 Answers 3

5 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related