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 看起来很相似只是没有 makeSomething 方法我的问题是：当我在 makeSomething() 方法中获取值时如何？

谢谢！

Answer 1

在 parent 中，您必须为 child 组件提供 formControlName 并在 formBuilder 中包含 child 组件。

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

在 child 中，您实现了 ControlValueAccessor 接口。

例如，尝试 this plunker

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

Angular2 - Form implemented in another form - How to get values

angular2-forms

angular2-formbuilder