Angular 响应式表单提交事件

Question

我已经 uilt 了一个非常有效的验证组件。但是，我想通过在成功提交表单时添加成功消息来扩展它。

在我传入表单的组件中，观察变化，并根据错误采取行动：

this.formGroup.valueChanges.pipe(takeUntil(this.ngUnsubscribe)).subscribe(data => {
    if (this.formGroup.invalid) {
        this.validation = { message: `Check for errors in the form`, valid: false };
    } else {
        this.validation = { message: '', valid: true };
    }
});

但是我看不到将提交事件放入我的组件以便我可以在 ui 中显示成功的直接方法。

我能以某种方式使用 (ngSubmit) event 吗？
你会怎么做才能得到它？

更新：

在投入大量时间后，我的 feature request is here
写了关于 "success handling" on Medium
(2022) 我们终于有了 ng-submitted class (v12.1)

Answer 1

我不知道任何直接来自 FormGroup 的提交事件 class，我知道你应该从表单模板中收听它。

<form [formGroup]="formGroup" (ngSubmit)="submit()">
  <!-- Your controls here-->
  <button>Submit</button>
</form>

在您的组件代码中，您应该监听创建 submit() 方法的提交事件

Answer 2

从 Angular 12.1 开始，已将 ng-submitted class 添加到已提交的 form 元素中。

class 在提交时自动添加，并在重置时删除。

Angular 响应式表单提交事件

Angular Reactive Form Submission Event

javascript

form-submit

angular

angular-reactive-forms