Question

我正在使用表单，并且有两个组件：我的子组件包含以下formGroup对象：

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

child子元素只是形式的一小部分，父组件，包含带有提交按钮的全局表单。

我的问题是：当我单击“提交”按钮时，我想在父组件中从子组件中获取表单组，并将其推到父组件中的全局表单中。

我在子组件中添加输出：

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

但是我不知道如何让父Comp中的提交按钮从我的子组件中获取FormGroup对象，然后继续推送数据...

您对如何实现这一目标有任何想法吗？

谢谢。

最好的问候。

Answer 1

您可以将父表单传递给子组件：

<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

Answer 2

在子组件中执行以下操作：

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中使用的实际formGroup。

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

如何将FormGroup对象作为输出从子组件n Angular发送到父组件

2 个答案: