响应式表单提交状态

Question

我想知道是否有任何方法可以检索响应式表单的 'submitted' 状态。

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

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

但是当使用响应式表单时，如果不声明我自己的变量，我无法实现相同的功能，我在提交时 update/reset 这看起来很奇怪，因为在模板驱动的变体中不需要它。

到目前为止我尝试过的：

（在组件中） @ViewChild(FormGroupDirective) formGroupDirective / （在模板中） formGroupDirective.submitted
- ExpressionChangedAfterItHasBeenCheckedError
表格="ngForm" [表格组]="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

这样试试。您可以在模板中访问提交状态，如下所示

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

堆栈闪电战 link： https://stackblitz.com/edit/angular-hmppqf

Answer 2

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>

响应式表单提交状态

Reactive Forms submitted state

angular

angular-reactive-forms

formgroups