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.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>

stackblitz链接： https://stackblitz.com/edit/angular-hmppqf

响应式表单提交状态

2 个答案: