CODEWITHSUNDEEP
angular2-formsangular2-formbuilder
crotoan
crotoan

Reputation: 183

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

I have 2 forms. One parent form, and one children form. It looks like this:

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

For some-form-component I use file like this:

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

My component for parent form looks like this:

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 looks similiar just without makeSomething method My question is: how when I get values in makeSomething() method?

Thanks!

Upvotes: 0

Views: 1342

Answers (1)

bob
bob

Reputation: 2734

In parent, you have to provide formControlName to your child component and include child component in formBuilder.

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

In child, you implement ControlValueAccessor interface.

For example, try this plunker

Upvotes: 1

Related Questions