How to Send FormGroup Object as Output to Parent Component from child component n Angular

Do something like this in child component:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';@Component({  selector: 'app-child',  templateUrl: './child.component.html',  styleUrls: ['./child.component.css']})export class ChildComponent implements OnInit{  @Output() private onFormGroupChange = new EventEmitter<any>();  employeeForm = new FormGroup({       firstName:new FormControl(),       lastNAme:new FormControl(),       email:new FormControl()    });  public ngOnInit() {     this.onFormGroupChange.emit(this.employeeForm);  }}

And parent component:this.formCheck is actual formGroup we can use in html.

import { Component, OnInit } from '@angular/core';import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';@Component({  selector: 'app-parent',  templateUrl: './parent.component.html',  styleUrls: ['./parent.component.css']})export class ParentComponent {   formCheck :any  = ''   public onFormGroupChangeEvent(_event) {    this.formCheck = _event;    console.error(_event, this.formCheck['controls'])  }}

Demo

You can pass the parent form to child component:

<form [formGroup]="parentForm">   <child-form [form]="parentForm"></child-form>   <button (click)="submit()">Submit</button></form>

In child-form.component.ts, you can use addControl:

@Input() form; // this is parentFormconstructor(private fb: FormBuilder) { }ngOnInit() {   this.form.addControl('firstName', new FormControl('', Validators.required));}

When click submit, you'll be able to get the form data from child component too:

this.parentForm.value