Show errors messages only after form submit

Question

I am creating Angular 6 Form with validation. I want to show error messages only after submitting the form. Important fact is that messages SHOULD NOT change during the typing. So for example when the user hasn't typed anything in input and then submitted the form, the required messages should appear. After that when user types something, the messages should be visible all the time until the next submitt button press. Also the error messages shouldn't change to another when previous rule was fulfiled. To be honest I don't know if it is possible using Reactive Forms.

app.component.html

<form [formGroup]="form" novalidate (ngSubmit)="submit()" #myform="ngForm">
    <input class="input" type="text" formControlName="firstName" />   
    <p *ngIf="form.get('firstName').hasError('required') && myform.submitted">
      Name is required
    </p>
    <p *ngIf="form.get('firstName').hasError('minlength') && myform.submitted">
      Min length of string is {{form.controls.firstName.errors.minlength.requiredLength}}    
    </p>
    <button type="submit">Submit</button>
</form>

app.component.ts

export class AppComponent  {
  form: FormGroup
  constructor(private fb: FormBuilder,) {
      this.form = this.fb.group({
          firstName: ['', [Validators.required, Validators.minLength(5)]]
      });
  }

  submit() {
    console.log(this.form);
  }
}

DEMO: stackblitz

Thanks for any help!

I think It's not possible with Reactive forms. Template-driven forms are more flexible and you can customize it easily. — rcanpahali
– rcanpahali, Commented Feb 22, 2019 at 8:12
@shadowman_93, impossible is nothing :) (also, I do not agree with you: for me, the reactive forms are more flexible than the template-driven form) — Eliseo
– Eliseo, Commented Feb 22, 2019 at 9:29

Eliseo · Accepted Answer · 2019-02-22 12:52:19Z

7

From Angular 7 you can use: {updateOn:'submit'} or {updateOn:'blur'}

*Update using new FormGroup and new FormControl (using formBuilder not work)

Use {updateOn:'blur'} when you want to correct the error is lost focus the input, {updateOn:'submit'} if it's only when submit

this.form = new FormGroup({
        firstName:new FormControl('', 
          [Validators.required, Validators.minLength(5)])
      },{updateOn:'submit'});

*Update 2 if you want use with formBuilder see the answer to Q in stackoverflow

edited Feb 22, 2019 at 12:52

answered Feb 22, 2019 at 9:25

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

2 Comments

hetious Over a year ago

This doesn't work either...stackblitz.com/edit/…

Eliseo Over a year ago

Sorry, I don't know what I was thinking. UpdateOn is no using FormBuilder, see stackblitz.com/edit/angular-7gs9lb?file=src/app/…

ferhado · Accepted Answer · 2019-02-22 09:06:12Z

2

You could check the validation in the submit function like this:

<p *ngIf="requiredError">
  Name is required
</p>
<p *ngIf="invalid">
  Min length of string is {{form.controls.firstName.errors.minlength.requiredLength}}    
</p>

  invalid: boolean;
  requiredError: boolean;
  submit() {
    console.log(this.form);
    this.invalid = this.form.get('firstName').hasError('minlength');
    this.requiredError = this.form.get('firstName').hasError('required');
  }

edited Feb 22, 2019 at 9:06

answered Feb 22, 2019 at 8:42

ferhado

2,6042 gold badges17 silver badges38 bronze badges

2 Comments

hetious Over a year ago

In your example {{form.controls.firstName.errors.minlength.requiredLength}} can't be used. The console will throw an error since the string exceed length of 5 characters. But otherwise it works as I expected so thanks for your effor! :)

ferhado Over a year ago

You could use the question mark like this it works: {{form.controls.firstName.errors?.minlength?.requiredLength}}

Collectives™ on Stack Overflow

Show errors messages only after form submit

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related