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

Question

I'm working in forms and I have two components: my child component contains this formGroup Object :

employeeForm : FormGroup;
this.employeeForm = new FormGroup({
       firstName:new FormControl(),
       lastNAme:new FormControl(),
       email:new FormControl()
    });

the child Component conatins just a small part of the form and the parent componant, contains the global form with submit button..

my issue is: I want in the Parent Component when I click on submit button I get the form group from my child component and push it to my global form in my parent component.

I add output in my child component :

@Output() onFormGroupChange: EventEmitter<FormGroup> = new EventEmitter<FormGroup>();

but I don't know how to let the submit button in parent Comp take the FormGroup object from my child component and proceed to push data...

do you have any idea on how to achieve this?

Thanks in advance.

Best Regards.

Answer 1

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 parentForm

constructor(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

Answer 2

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