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.

Will sending the click event (on submit) from the parent as an input to the child to tell it to emit the child's form work for you? — Nicholas K, Jun 30 '19 at 16:24
define `employeeForm` in parent component as part of larger form and pass it to the child as an `@Input` so that you won’t need to deal with outputting/merging forms. — ysf, Jun 30 '19 at 16:38
Like @ysf said, pass parent form through `@Input`, and only use what you need in the child component. It will keep the reference — Bojan Kogoj, Jun 30 '19 at 16:41
Try these:https://stackoverflow.com/questions/53588169/how-to-use-formgroupname-inside-child-components/53588596#53588596 — Chellappan வ, Jun 30 '19 at 17:03

score 10 · Answer 1 · answered Jun 30 '19 at 17:18

10

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

answered Jun 30 '19 at 17:18

katwhocodes

2,188
1
22
24

1

This is actually a very clean and beautiful way to do it. Impressed. Thanks. – KhoPhi May 28 '20 at 15:34
1

This is not the scenario the auther asked for. This describes the other way around. – halanson Oct 30 '22 at 14:49

score 10 · Accepted Answer · answered Jun 30 '19 at 17:40

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

one wuestion please , sending employeeForm in onInit means we send the form without validation ? — James, Jul 01 '19 at 18:05
You can customize validations and then pass to emit object or directly add validations in child component itself — Anil Arya, Jul 02 '19 at 06:30
where are the textboxes to type items in the stackblitz? can you add in ? thanks — , Nov 15 '19 at 19:47

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

2 Answers2