Angular2 - 以另一种形式实现的表单 - 如何获取值

问题描述：

我有2种形式。一个父母表格和一个孩子表格。它看起来像这样：Angular2 - 以另一种形式实现的表单 - 如何获取值

<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()方法中获得值？

谢谢！

你的有点混乱，你可以请确切的问题.......... – MMR

你好，我已经更新的问题 – crotoan

答

在父级，您必须为您的子组件提供formControlName，并在formBuilder中包含子组件。

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

在孩子，你实现ControlValueAccessor接口。

例如，尝试this plunker

Angular2 - 以另一种形式实现的表单 - 如何获取值

相关推荐