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

Posted 2023-03-13

【中文标题】如何从子组件 n Angular 将 FormGroup 对象作为输出发送到父组件

【英文标题】：How to Send FormGroup Object as Output to Parent Component from child component n Angular

【发布时间】：2019-11-11 13:02:24

【问题描述】：

我在表单中工作，我有两个组件：我的子组件包含这个 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 对象并继续推送数据...

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

提前致谢。

最好的问候。

【问题讨论】：

是否会从父级发送点击事件（提交时）作为输入到子级，告诉它为您发出子级的表单？

在父组件中定义 employeeForm 作为较大表单的一部分，并将其作为 @Input 传递给子组件，这样您就不需要处理输出/合并表单。

就像@ysf 说的，通过@Input 传递父表单，只在子组件中使用你需要的。它将保留参考

试试这些：***.com/questions/53588169/…

【参考方案1】：

在子组件中做这样的事情：

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

【讨论】：

请注意，在 onInit 中发送employeeForm 意味着我们发送的表单没有经过验证？

您可以自定义验证，然后传递给发射对象或直接在子组件本身中添加验证

在 stackblitz 中输入项目的文本框在哪里？你可以添加吗？谢谢

【参考方案2】：

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

<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

【讨论】：

这实际上是一种非常干净漂亮的方式。印象深刻。谢谢。