反应式表单提交状态

Question

我想知道是否有任何方法可以检索反应表单的“已提交”状态。

使用模板驱动的表单，您可以通过“ngForm”访问 FormGroupDirective，如下所示

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

但是，当使用反应式表单时，如果不声明我自己的变量（在提交时更新/重置），我就无法实现相同的功能，这看起来很奇怪，因为模板驱动的变体中不需要这样做。

到目前为止我尝试过的：

• （在组件中） @ViewChild(FormGroupDirective) formGroupDirective / （在模板中） formGroupDirective.subscribed
  • 已检查错误后表达式已更改
• 形式=“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>