angular - 响应式表单提交状态

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>

标签： angularangular-reactive-formsformgroups

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>