Как отправить объект FormGroup в качестве вывода на родительский компонент из дочернего компонента n Angular - PullRequest
Новая
       31

Как отправить объект FormGroup в качестве вывода на родительский компонент из дочернего компонента n Angular

2 голосов
/ 30 июня 2019

Я работаю в формах, и у меня есть два компонента: мой дочерний компонент содержит этот объект formGroup: 

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

дочерний компонент содержит лишь небольшую часть формы, а родительский компонент содержитглобальная форма с кнопкой отправки ..

моя проблема: я хочу, чтобы в родительском компоненте, когда я нажимал кнопку отправки, я получал группу форм из моего дочернего компонента и передавал ее в мою глобальную форму в моем родительском компоненте.

Я добавляю вывод в мой дочерний компонент: 

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

, но я не знаю, как позволить кнопке отправки в родительском Comp взять объект FormGroup из моего дочернего компонента и перейти к pushданные ...

Вы знаете, как этого добиться?

Заранее спасибо.

С наилучшими пожеланиями.

Ответы [ 2 ]

1 голос
/ 30 июня 2019

Сделайте что-то подобное в дочернем компоненте: 

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


}

И родительский компонент: this.formCheck является фактической формой группы, которую мы можем использовать в 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'])
  }
}

Демо

1 голос
/ 30 июня 2019

Вы можете передать родительскую форму дочернему компоненту: 

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

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

В child-form.component.ts вы можете использовать addControl: 

@Input() form; // this is parentForm

constructor(private fb: FormBuilder) { }

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

При нажатии кнопки «Отправить» вы также сможете получить данные формы из дочернего компонента: 

this.parentForm.value
...