Reactive Forms submitted state

Question

I was wondering if there was any way to retrieve the 'submitted' state of a Reactive Form.

With template driven forms you can access the FormGroupDirective via the 'ngForm' as follows

<form #form='ngForm' (ngOnSubmit)="handleSubmit()">
    <p *ngIf="form.invalid && form.submitted">Invalid</p>
    <button type="submit">Submit</button>
</form>

But when using reactive forms I am unable to achieve the same functionality without declaring my own variable that I update/reset on submit which seems weird since this isn't needed in the template driven variant.

What I've tried so far:

• (in component) @ViewChild(FormGroupDirective) formGroupDirective / (in template) formGroupDirective.submitted
  • ExpressionChangedAfterItHasBeenCheckedError
• form="ngForm" [formGroup]="myForm"
  • There are multiple directives with 'exportAs' set to 'ngForm'

Any suggestions?

EDIT: reactive form

<form [formGroup]="myForm" (submit)="doSomething()">
    <input formControlName="myInput">
    <p *ngIf="myForm.invalid">This is visible before submitting</p>
    <button type="submit">Submit</button>
</form>

Urga

hmm strange, so I guess the best way to go about this then is to just declare my own 'submitted` variable and manage its state? – Urga

im sorry i misunderstand your question.But it will work using template reference variable in reactive forms.Did you try to check if its working ? – Orgell

Answer 1

Stackblitz: https://stackblitz.com/edit/angular-8-reactive-form-validation-vv7npe

Use template reference variable on form tag #form="ngForm"and then you can directly use *ngIf="myForm.invalid && form.submitted"

<form [formGroup]="myForm" #form="ngForm" (ngSubmit)="doSomething()">
    <input formControlName="myInput">
    <p *ngIf="myForm.invalid && form.submitted">This is visible before submitting</p>
    <button type="submit">Submit</button>
</form>

Orgell

This does work. But are we not mixing template driven & reactive forms here? Looks like we have 2 form groups in that example: ngForm and myForm. Thats confusing to me – Urga

No we can use it like that...its the same form group.Just for getting the submitted value we can use ngForm.or else if you dont want to use ngForm then you need to create variable isSubmitted and set accordingly..thoughts?? – Orgell

If ngForm references to myForm then that looks like the best option to me. Thanks! – Urga

how do I know if its submitted in Typescript though? – Lipoid

Same with submitted property – Orgell

Answer 2

try like this way. You can access submitted status in template as below

<form [formGroup]="myForm" #formDir="ngForm" (ngSubmit)="doSomething()">
    <input formControlName="myInput">
    <p *ngIf="formDir.submitted">Form submitted</p>
    <button type="submit">Submit</button>
</form>

stackblitz link: https://stackblitz.com/edit/angular-hmppqf

Catalase