Show form validation errors on submit in angular template driven form

Question

I have created template driven form in Angular.

<form novalidate #f="ngForm" (ngSubmit)="onSubmit(f)">
<input type="text" class="form-control" name="fullName" #fullName="ngModel" required>
<div *ngIf="fullName.errors?.required && fullName.touched" class="validation-message">Required</div>
<button type="submit">Post</button>

It shows error when it is invalid and touched. I need to display error when form is submitted i.e. when the submit button is clicked.

onSubmit({value, valid}): void {
    if (valid) {
      console.log(value);
    } else {
      console.log('invalid form');
    }
  }

score 2 · Answer 1 · answered Oct 14 '19 at 19:12

2

In onSubmit method iterate through all form controls and simply mark them as touched

Object.keys(form.controls).forEach(key => {
  form.controls[key].markAsTouched();
});

answered Oct 14 '19 at 19:12

esnezz

619
1
7
19

score 0 · Answer 2 · answered Jun 08 '18 at 01:02

Set a flag to be true when it's valid and use $ngIf: HTML

<form #myForm="ngForm" (submit)="onSubmit(myForm)">
        <input type="text" class="form-control" required [(ngModel)]="fullname"          name="fullname" #input="ngModel">
        <div style="color:red" *ngIf="submittedError">
                Error
        </div>
        <br><br>
    <button type="submit">Post</button>
</form>

Typescript:

submittedError;
...  
onSubmit({value, valid}): void {
    if (valid) {
     this.submittedError=false;
      console.log(value);
    } else {
     this.submittedError=true;
      console.log('invalid form');
    }
  }
}

demo

Yes, I know this but if there are multiple form fields to be validated, then how to target the error displaying div of the respective erroneous form field? — Upendra Sachan, Jun 08 '18 at 03:48

score 0 · Answer 3 · answered Jun 08 '18 at 01:04

0

You have to use an extra flag to do that.

Like below,

submitted = false;
onSubmit() { this.submitted = true; }

And insert submitted into *ngIf statement.

Reference : https://angular.io/guide/forms#toggle-two-form-regions-extra-credit

answered Jun 08 '18 at 01:04

Hyuck Kang

1,671
2
16
24

Yes, I know this but if there are multiple form fields to be validated, then how to target the error displaying div of the respective erroneous form field? – Upendra Sachan Jun 08 '18 at 03:48
I think that question is totally different with the question which you wrote first. I think your code is already enough to show error for each forms. Each **formcontrol** returns **formcontrol.error** only if it is invalid. If a **formcontrol** is valid, **formcontrol.error** is **undefined**. Frankly, I do not use your code pattern but use the pattern like `formControlName="fullName"` and addtional `form.ts` file. So, I cannot guarantee you that the specific code works or not. But, on **formcontrol** points, it is right. https://angular.io/api/forms/AbstractControl#errors – Hyuck Kang Jun 08 '18 at 04:32

score 0 · Answer 4 · answered Sep 27 '18 at 12:17

0

To add to the answers: ngForm has a submitted flag exposed. So, just create a template variable, and do a ngIf on the errors (ie. ngForm.submitted === true)

answered Sep 27 '18 at 12:17

Remco Vlierman

111
1
7

Show form validation errors on submit in angular template driven form

4 Answers4