Angular 8: Send Form Data from Child Output to Parent with Reactive Forms

Question

How do I send the data to a Parent Component with Reactive Forms? My child component contains the following, However, this does not seem to be working from example here,

How can I fix this? When I type something into form, receiving nothing from console output. Can someone provide working stackblitz demo?

Child:

public editAddressForm: FormGroup;
@Output() private onFormGroupChange = new EventEmitter<any>();

this.editAddressForm = this.formBuilder.group({
  'streetNumber': [null, [Validators.required, Validators.maxLength(32)]],
  'streetName': [null, [Validators.required, Validators.maxLength(64)]],
  'city': [null, [Validators.required, Validators.maxLength(32)]],
  'state': [null, [Validators.required, Validators.maxLength(16)]],
  'postalCode': [null, [Validators.required, Validators.maxLength(16)]]
})
}


ngOnInit() {

this.onFormGroupChange.emit(this.editAddressForm);


    <form [formGroup]="editAddressForm">
          <input formControlName = "city" class = "mailstopcode"></input>
          <input formControlName = "PostalCode" class = "incareof"></input>     
    </form>

Parent:

formCheck :any  = '' 
public onFormGroupChangeEvent(_event) {
  this.formCheck = _event;
  console.log(_event, this.formCheck['controls'])
  console.log(_event)
}

<app-mailing-form (onFormGroupChange)="onFormGroupChangeEvent($event)"></app-mailing-form>

Answer 1

You need to dispatch the event emitter every time a change occurs in your form, which means that you need to subscribe to the changes of the form and then emit the @Output() property in your child's ngOnInit method:

ngOnInit() {
  this.editAddressForm.valueChanges
    .subscribe(() => this.onFormGroupChange.emit(this.editAddressForm.value));
}

Take into account that above code will fire the event even if the form is not valid. If you wanted to fire the event only when the form is valid i.e after hitting a submit button you could do something like this:

public submit(): void {
  if (this.editAddressForm.valid) {
    this.onFormGroupChange.emit(this.editAddressForm.value);
  }
}

Or using rxjs observable pattern:

private submit$ = new Subject<void>();

ngOnInit() {
  this.submit$.pipe(
    filter(() => this.editAddressForm.valid),
    map(() => this.editAddressForm.value),
  ).subscribe((formData) => this.onFormGroupChange.emit(formData));
}

public submit(): void {
  this.submit$.next();
}

UPDATE:

Parent component would just need to listen to the onFormGroupChange event of child component providing a function that will receive the form data as its first argument:

public onFormGroupChangeEvent(formData) {
  console.log(formData.city);
  console.log(formData.postalCode);
  console.log(formData);
}

<app-mailing-form
  (onFormGroupChange)="onFormGroupChangeEvent($event)">
</app-mailing-form>