1

I am working on a with nested form groups in Angular 14.

There are form controls common to multiple forms so I have added them in a partial.

In form.component.ts I have:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
})
export class FormComponent {
  public form: FormGroup = new FormGroup({
    first_name: new FormControl('', Validators.required),
    last_name: new FormControl('', Validators.required),
    email: new FormControl('', [Validators.required, Validators.email]),
    phone: new FormControl('', Validators.required),
  });

  constructor() {}

  ngOnInit(): void {}

  public sendFormData() {
    console.log(this.form.value);
  }
}

In form.component.html I include the partial <app-additional></app-additional>:

<form [formGroup]="form">
  <mat-form-field appearance="outline" floatLabel="always">
    <mat-label class="mat-label">Fast name:</mat-label>
    <input class="mat-input" matInput formControlName="first_name" />
  </mat-form-field>

  <mat-form-field appearance="outline" floatLabel="always">
    <mat-label class="mat-label">Last name:</mat-label>
    <input class="mat-input" matInput formControlName="last_name" />
  </mat-form-field>

  <app-additional></app-additional>

  <div class="center">
    <button
      (click)="sendFormData()"
      mat-raised-button
      color="primary"
      [disabled]="!form.valid"
    >
      Submit
    </button>
  </div>
</form>

See Stackblitz HERE.

The problem

Instead of rendering the partial, the app throws the error:

Error: formControlName must be used with a parent formGroup directive.
Questions:
  1. What causes this problem?
  2. What is the most reliable way to fix it?
Razvan Zamfir
  • 4,209
  • 6
  • 38
  • 252
  • add `viewProviders:[{ provide: ControlContainer, useExisting: FormGroupDirective }]`, see https://stackoverflow.com/questions/73455294/how-do-i-get-access-to-from-control-from-another-component-in-angular/73457780#73457780 – Eliseo Feb 02 '23 at 10:22
  • @Eliseo I did that (updated the Stackblitz), but the problem persists. – Razvan Zamfir Feb 02 '23 at 10:28
  • You need to pass form as an input in partial – Devang Patel Feb 02 '23 at 10:33
  • 1
    @RazvanZamfir, your [forked stackblitz](https://stackblitz.com/edit/angular-material-modal-demo-xpsvqq?file=src%2Fapp%2Fpartials%2Fadditional%2Fadditional.component.ts) working only adding the provider (the provider is in the **aditional.component**) – Eliseo Feb 02 '23 at 11:15

1 Answers1

1

You need to pass your form as an input to partial and provide the same form group name over there to make it work.

In form.component.html:

<app-additional [form]="form"></app-additional>

In additional.component.html:

<div class="more-controls" [formGroup]="form">

In additional.component.ts:

@Input() form: FormGroup;
Devang Patel
  • 1,795
  • 4
  • 21