Angular 响应式表单提交事件

Question

I've built a validation component that works great. However, I'd like to extend it by adding success messages when a form is submitted successfully.

In the component I pass in the form, watch for changes, and act on the error:

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 };
    }
});

However I can't see a direct way to get a submission event into my component so that I can show success in the ui.

1. Can I use the (ngSubmit) event somehow?
2. what would you do to get it?

UPDATE:

1. After significant time invested into this my feature request is here

2. Wrote about "success handling" on Medium

3. (2022) we finally have the ng-submitted class (v12.1)

Answer 1

I don't know any submission event directly from the FormGroup class, what I know is that you should listen it from the form template.

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

In your component code you should listen the submit event creating the submit() method

Answer 2

As of Angular 12.1 an ng-submitted class is added to the form element that has been submitted.

The class is automatically added on submissions, and removed on resets.