How to Transfer FormGroup Object from Child Component to Parent Component in Angular

Question

How to Transfer FormGroup Object from Child Component to Parent Component in Angular

In the realm of form creation, I find myself facing a dilemma with two components. My child component holds a crucial FormGroup object, defined as such:

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

The child Component only manages a fraction of the form, while the parent component houses the comprehensive form along with a submit button.

My current hurdle is this: I aim to have the Parent Component extract the FormGroup from my child component upon clicking the submit button and seamlessly integrate it into the overarching form.

To tackle this issue, I introduced an output in my child component:

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

However, I am uncertain about how to instruct the submit button in the parent Comp to access the FormGroup object from my child component and facilitate the data transfer flow...

Any insights or suggestions on overcoming this obstacle would be greatly appreciated!

Thank you for your help.

Sincerely,

angular typescript angular6 angular-components angular-forms

Answer 1

Answer №1

Implement a similar approach in the 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);
  }


}

As for the parent component: this.formCheck represents the actual formGroup available for 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'])
  }
}

See Demo

Answer 2

Implement a similar approach in the 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);
  }


}

As for the parent component: this.formCheck represents the actual formGroup available for 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'])
  }
}

See Demo

Answer 3

Answer №2

To send the parent form data to a child component, follow these steps:

<form [formGroup]="parentForm">
   <child-component [form]="parentForm"></child-component>

   <button (click)="submit()">Submit</button>
</form>

In the child.component.ts file, you can add controls using the parentForm variable:

@Input() form; // this is referring to the parentForm

constructor(private fb: FormBuilder) { }

ngOnInit() {
   this.form.addControl('lastName', new FormControl('', Validators.required));
}

Upon submitting, you can access the form data from the child component as well:

this.parentForm.value

Answer 4

To send the parent form data to a child component, follow these steps:

<form [formGroup]="parentForm">
   <child-component [form]="parentForm"></child-component>

   <button (click)="submit()">Submit</button>
</form>

In the child.component.ts file, you can add controls using the parentForm variable:

@Input() form; // this is referring to the parentForm

constructor(private fb: FormBuilder) { }

ngOnInit() {
   this.form.addControl('lastName', new FormControl('', Validators.required));
}

Upon submitting, you can access the form data from the child component as well:

this.parentForm.value

How to Transfer FormGroup Object from Child Component to Parent Component in Angular

Answer №1

Answer №2

Similar questions

Adding External Libraries to Angular-CLI: Expanding Your Toolkit with jQuery and Bootstrap

Is there a way to retrieve all properties within a Typescript Class that includes optional properties?

Error in sending data to the server via the specified URL: "Http failure response for http://localhost/post.php: 0 Unknown Error" and POST request to http://localhost/post.php failed with error code

Incorporating HTTP status codes into error handling

What is the best way to implement dotenv in a TypeScript project?

The module '@angular/core' is not found in the Visual Studio Code IDE

Seven to eight customizable pathways

Utilizing Typescript with Next.js API to limit the NextApiRequest query parameter to only accept string types

typescript issue with react's createContext when used with typescript

Exploring the concept of TypeScript's Array Union

What is the proper way to integrate helmet.js with typescript?

Exploring the Magic of Slide-up Animation with Angular 5

Keep the Angular Material tables refreshed with the latest data pulled from an API

Is your Angular 2 routing failing to work properly after a page refresh or reload when using gulp?

Attempting to reach MdTabBody within the Angular Material 2 framework

Issue with command execution within execSync in node.js

Angular Alert: The element 'app-header' is unrecognized in Angular 9

An issue arises in Slate.js when attempting to insert a new node within a specified region, triggering an error

What is the best way to update the key value with an onclick event when the key value is already in the array using TypeScript?

Troubleshooting problems with loading data while implementing an iOS infinite scroll feature in Ionic 3