Como enviar objeto FormGroup como saída para o componente pai do componente filho n Angular

James

Estou trabalhando em formulários e tenho dois componentes: meu componente filho contém este objeto formGroup:

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

o componente filho contém apenas uma pequena parte do formulário e o componente pai contém o formulário global com o botão de envio.

meu problema é: desejo no componente pai quando clico no botão enviar, recebo o grupo de formulários de meu componente filho e envio-o para meu formulário global em meu componente pai.

Eu adiciono saída em meu componente filho:

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

mas não sei como permitir que o botão enviar no Comp pai pegue o objeto FormGroup do meu componente filho e prossiga para enviar os dados ...

você tem alguma ideia de como fazer isso?

Desde já, obrigado.

Cumprimentos.

Anil Kumar Arya

Faça algo assim no componente filho:

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);
  }


}

E o componente pai: this.formCheck é o formGroup real que podemos usar em 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

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

por que não consigo enviar um objeto do componente pai para o componente filho no angular?

Como enviar saída do componente via tomada do roteador para o componente pai

Como passar dados do componente filho para o pai [Angular]

Como passar dados do componente angular filho para o pai

Como enviar um valor para o componente pai do componente filho com base na condição?

Como enviar o valor da variável de um componente filho para o componente pai?

Como enviar dados do componente filho sem estado para o componente pai sem estado no react?

Como enviar dados do componente pai para o componente filho em AngularJs

Como enviar dados do componente filho sem estado para o componente pai sem estado no react?

Como atualizar o componente pai do componente filho no Angular 2

roteador angular como chamar o componente filho do componente pai

Como passar dois argumentos para uma função de componente pai do componente filho angular 7?

Como passar dados do componente filho para o componente pai no Angular4

Como posso passar os objetos do componente Pai para o componente Filho no Angular 2?

Como enviar valor do componente filho para o pai? (Componentes funcionais)

Reaja, como enviar adereços do componente pai para o componente filho? (para usar esses adereços fora da função de renderização)

Como passar o valor do componente filho para o pai

como importar o estado do filho para o componente pai

Como modificar ou enviar o estado de um componente filho para o pai (com componente funcional)

Como passar o estado do componente pai para filho

Como passar dados únicos do componente filho para o pai?

A passagem da matriz de objeto do componente pai para o filho usando @Input não está funcionando no Angular 6

Passando o objeto do servidor do componente pai para o componente filho angular2

Angular 2: Como definir o valor padrão do campo do componente pai para o componente filho?

Como passar o valor de entrada do componente pai para o filho sem usar ng no angular?

Como redefinir um campo no componente filho do componente pai - angular

Como passar a chave i18n do componente pai para filho antes do início da tradução?

A saída do componente filho para o pai não funciona corretamente

Como passar o comprimento da matriz para outro componente (do componente filho para o pai) em vue.js?