如何从子组件中获取父表单的字段？ [复制]

Posted 2023-03-13

【中文标题】如何从子组件中获取父表单的字段？ [复制]

【英文标题】：How get fields from children components for parent form? [duplicate]

【发布时间】：2020-05-06 13:31:33

【问题描述】：

我有以下结构：

父组件（对话框）

<form #dialogForm="ngForm">
    <app-window-element></app-window-element>
</form>
<button (click)="button.callback(dialogForm)">Click me</button>

子组件（元素）

<div>
    <label for="email">Email</label>
    <input type="text" name="email" id="email" formControlName="email">

    <label for="password">Password</label>
    <input type="password" name="password" id="password" formControlName="password">
</div>

当点击按钮时 - 发送 #dialogForm。

但我有问题 - 对象 dialogForm 没有来自子组件的字段。 (dialogForm 是 NgForm)

我得到错误：

WindowFormComponent.html:5 ERROR 错误：必须使用 formControlName 带有父 formGroup 指令。您需要添加一个 formGroup 指令并将一个现有的 FormGroup 实例传递给它（你可以在你的类中创建一个）。

例子：

<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

In your class:

this.myGroup = new FormGroup(
   firstName: new FormControl()
);

如果我在表单中只有字段 - 它可以工作，但不适用于子组件。

<form #dialogForm="ngForm">
    <label for="email">Email</label>
    <input type="text" name="email" id="email" formControlName="email">

    <label for="password">Password</label>
    <input type="password" name="password" id="password" formControlName="password">
</form>
<button (click)="button.callback(dialogForm)">Click me</button>

【问题讨论】：

部分。我需要向 parentForm 添加字段。

【参考方案1】：

您可以像这样将整个表格传递给您的孩子：

parents.ts

constructor(fb: FormBuilder) 
  this.myGroup = fb.group(
    email: new FormControl(''),
    password: new FormControl('')
  );


onSubmit() 
  console.log(this.myGroup.value);

parents.html

<form [formGroup]="myGroup" (ngSubmit)="onSubmit()">
  <app-window-element [parentform]="myGroup"></app-window-element>
  <button></button>
</form>

child.ts

@Input() parentForm: FormGroup;

child.html

<div [formGroup]="parentForm">
  <label for="email">Email</label>
  <input type="text" name="email" id="email" formControlName="email">

  <label for="password">Password</label>
  <input type="password" name="password" id="password" formControlName="password">
</div>

【讨论】：

是的，我使用这个解决方案。如何将子字段添加到 myGroup？我不断收到错误：formControlName 必须与父 formGroup 指令一起使用

我更新了我的帖子，添加了parent.ts。您确定您的 formGroup 的名称吗？

我有这样的情况，父母不知道数量以及孩子中存在哪些字段。是否可以在孩子内部的表单中添加字段？

用我告诉你的解决方案，父组件必须声明表单的属性。如果要在嵌套级别管理表单，则应将其声明到子组件中。