Реактивные формы представленные государством

Question

Мне было интересно, есть ли какой-нибудь способ получить «отправленное» состояние Реактивной формы.

С помощью шаблонно-управляемых форм вы можете получить доступ к FormGroupDirective через 'ngForm' следующим образом

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

Но при использовании реактивных форм я не могу достичь той же функциональности, не объявив собственную переменную, которую я обновляю / сбрасываю при отправке, что кажется странным, поскольку в варианте, управляемом шаблоном, это не требуется.

То, что я попробовал до сих пор:

• (в компоненте) @ViewChild (FormGroupDirective) formGroupDirective / (в шаблоне) formGroupDirective.submitted
  • ExpressionChangedAfterItHasBeenCheckedError
• form = "ngForm" [formGroup] = "myForm"
  • Существует несколько директив с exportAs, установленным в ngForm

Есть предложения?

РЕДАКТИРОВАТЬ: реактивная форма

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

Answer 1

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

Используйте переменную ссылки шаблона в теге формы #form="ngForm", а затем вы можете напрямую использовать *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>

Answer 2

попробуй так. Вы можете получить доступ к представленному статусу в шаблоне, как показано ниже:

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

ссылка на стек: https://stackblitz.com/edit/angular-hmppqf