如何从子组件中获取字段作为父表单？ （Angular2）

Question

我具有以下结构：

父组件（对话）

<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错误错误：必须使用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>

我具有以下结构：父组件（对话框）

]

] >>

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

parents.html

<form [formGroup]="myGroup">
    <app-window-element [parentform]="myGroup"></app-window-element>
</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>

Answer 1

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

parents.html

<form [formGroup]="myGroup">
    <app-window-element [parentform]="myGroup"></app-window-element>
</form>