We have created our form and now we want to submit it using an EventEmitter, leaving it to a smart component wrapper to handle the actual server submission.

Approach

Within the form template declare the submit function using the ngSubmit directive as well as a type="submit" button:

<form [formGroup]="form" (ngSubmit)="submit()">
...
<button type="submit"></button>
</form>

Within the component initialize an EventEmitter instance and the following submit() method ( The form should model the FormInterface ):

import { Output, EventEmitter } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
export type FormInterface = { field1: string, field2: string };
form: FormGroup = new FormGroup({
//FormInterface property implementation
});
@Output() 
EM = new EventEmitter<FormInterface>();
submit() {
    if (this.form.valid) {
    this.EM.emit(this.form.value);
  }
}

The form will be submitted when the forms submit button is clicked.

Submitting Your Reactive Angular Form From a Presentation Component | Task

Scenario

Approach