Angular2 - 以另一種形式實現的表單 - 如何獲取值

Question

我有2種形式。一個父母表格和一個孩子表格。它看起來像這樣：

<form [formGroup]="form" (submit)="makeSomething()"> 
    <input type="text" formControlName="test" /> 
    <some-form-component></some-form-component> 
    <input type="submit" /> 
</form> 

對於some-form-component我使用的文件是這樣的：

<form [formGroup]="form"> 
    <input type="text" formControlName="somechildfield" /> 
</form> 

我的父窗體組件看起來是這樣的：

import {Component, OnInit} from "@angular/core"; 
import {FormBuilder} from "@angular/forms"; 

@Component({ 
    selector: 'my-parent-form', 
    templateUrl: 'my-parent.form.html' 
}) 
export class ParentFormComponent implements OnInit { 
    private form: any; 

    constructor(private builder: FormBuilder) {} 

    ngOnInit(): void { 

     this.form = this.builder.group({ 
      'test': [''], 
     }); 
    } 
    makeSomething() { 
     console.log(this.form.value); 
    } 
} 

SomeFormComponent看起來similiar只是沒有makeSomething方法 我的問題是：如何在makeSomething()方法中獲得值？

謝謝！

Answer 1

在父級，您必須爲您的子組件提供formControlName，並在formBuilder中包含子組件。

 <my-child formControlName="account"></my-child> 

在孩子，你實現ControlValueAccessor接口。

例如，嘗試this plunker