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

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 ERROR Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class).

Example:
<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>

Answer 1

您可以像这样将整个表单传递给您的 child :

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>

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

How get fields from children components for parent form?

javascript

angular

angular2-forms

angular8

angular-forms