How get fields from children components for parent form?

Question

I have following structure:

Parent component (dialog)

<form #dialogForm="ngForm">
    <app-window-element></app-window-element>
</form>
<button (click)="button.callback(dialogForm)">Click me</button>

Child component (element)

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

And when click to button - send #dialogForm.

But I have problem - object dialogForm don't has fields from children-components. (dialogForm is NgForm)

And I get error:

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()
});

If I have just fields within form - it is works, but is is don't work with children-components.

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

Partly. I need adding fields to parentForm. – QuestionMan Jan 20 '20 at 14:33 — QuestionMan, Jan 20 '20 at 14:33

Emilien · Accepted Answer · 2020-01-20T14:31:28.723

1

You can pass the entire form to your child like this :

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>

edited Jan 20 '20 at 14:31

answered Jan 20 '20 at 14:12

Emilien

2,701
4
15
25

Yep, I use this solution. How I can add children fields to myGroup? I keep getting errors: formControlName must be used with a parent formGroup directive – QuestionMan Jan 20 '20 at 14:26
I've updated my post adding the `parent.ts`. Are you sure about the name of your formGroup ? – Emilien Jan 20 '20 at 14:32
I have situation, when parent don't know quantity and which fields exist in child. Is it possible to add fields to the form inside the child? – QuestionMan Jan 20 '20 at 14:37
With the solution I told you, the parent component must **declare** properties of form. If you want to manage form in a nested level, you should declare it into the child component. – Emilien Jan 20 '20 at 14:46

How get fields from children components for parent form?

1 Answers1