Creating a Form in Angular That Dynamically Adds Form Controls

Question

Creating a Form in Angular That Dynamically Adds Form Controls

In order to achieve my objective of incorporating a search form with multiple filters on any given page, I aim to implement the following structure on my HomePageComponent:

<app-search-form>
  <app-searchbox></app-searchbox>
</app-search-form>

Currently, my SearchFormComponent implementation is as follows:

<form [formGroup]="form" (ngSubmit)="search()">
  <ng-content></ng-content>
  <br />
  <button type="submit">Search</button>
</form>

SearchboxComponent details:

<label for="searchbox">Search:</label>
<input id="searchbox" formControlName="searchbox" type="text" />

For further enhancements, components like SearchCategoryFilterComponent and SearchLocationFilterComponent can be added within the <app-search-form> as needed.

However, I encounter an error with the current setup:

NullInjectorError: NullInjectorError: No provider for ControlContainer!

This issue arises because when

<app-searchbox></app-searchbox>

is inserted in HomePageComponent, it perceives HomePageComponent rather than the SearchFormComponent as the parent, resulting in the inability to inject the ControlContainer. Moving

<app-searchbox></app-searchbox>

within the <form> section of SearchFormComponent resolves the problem and ensures proper functioning of the form submission.

How can I configure this setup to allow HomePageComponent to define the content of the form? This approach not only facilitates the addition of various filters on each page but also enables customization of filter styles for individual pages.

angular typescript angular-reactive-forms angular18 angular-dynamic-forms

Answer 1

Answer №1

In this scenario, the issue arises because content projection initializes the projected content on the parent level where there is no form to contain the ControlContainer, resulting in an error.

To resolve this issue, consider rendering dynamic components using the *ngComponentOutlet directive within a ng-container.

<form [formGroup]="form" (ngSubmit)="search()">
  <ng-container *ngComponentOutlet="formComponent"></ng-container>
  <br />
  <button type="submit">Search</button>
</form>

Pass the component you want to initialize as an @Input.

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SearchFormComponent, SearchboxComponent],
  template: `
    <app-search-form [formComponent]="component">
    </app-search-form>
  `,
})
export class App {
  name = 'Angular';
  component = SearchboxComponent;
}

Full Code:

import { Component, inject, OnInit, Input } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import {
  ReactiveFormsModule,
  ControlContainer,
  FormGroup,
  FormControl,
  FormBuilder,
} from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-searchbox',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <label for="searchbox">Search:</label>
    <input id="searchbox" formControlName="searchbox" type="text" />
  `,
  viewProviders: [
    {
      provide: ControlContainer,
      useFactory: () => inject(ControlContainer, { skipSelf: true }),
    },
  ],
})
export class SearchboxComponent implements OnInit {
  formGroup!: FormGroup;

  constructor(private controlContainer: ControlContainer) {}

  ngOnInit() {
    this.formGroup = this.controlContainer.control as FormGroup;
    this.formGroup.addControl('searchbox', new FormControl('', null));
  }
}

@Component({
  selector: 'app-search-form',
  standalone: true,
  imports: [ReactiveFormsModule, SearchboxComponent, CommonModule],
  template: `
  <form [formGroup]="form" (ngSubmit)="search()">
    <ng-container *ngComponentOutlet="formComponent"></ng-container>
    <br />
    <button type="submit">Search</button>
  </form>
  `,
})
export class SearchFormComponent implements OnInit {
  @Input() formComponent: any;
  form!: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.formBuilder.group({});
  }

  search() {
    console.log('Searching...');
    console.log(this.form.value);
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SearchFormComponent, SearchboxComponent],
  template: `
    <app-search-form [formComponent]="component">
    </app-search-form>
  `,
})
export class App {
  name = 'Angular';
  component = SearchboxComponent;
}

bootstrapApplication(App);

Check out the Stackblitz Demo

Answer 2

In this scenario, the issue arises because content projection initializes the projected content on the parent level where there is no form to contain the ControlContainer, resulting in an error.

To resolve this issue, consider rendering dynamic components using the *ngComponentOutlet directive within a ng-container.

<form [formGroup]="form" (ngSubmit)="search()">
  <ng-container *ngComponentOutlet="formComponent"></ng-container>
  <br />
  <button type="submit">Search</button>
</form>

Pass the component you want to initialize as an @Input.

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SearchFormComponent, SearchboxComponent],
  template: `
    <app-search-form [formComponent]="component">
    </app-search-form>
  `,
})
export class App {
  name = 'Angular';
  component = SearchboxComponent;
}

Full Code:

import { Component, inject, OnInit, Input } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import {
  ReactiveFormsModule,
  ControlContainer,
  FormGroup,
  FormControl,
  FormBuilder,
} from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-searchbox',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <label for="searchbox">Search:</label>
    <input id="searchbox" formControlName="searchbox" type="text" />
  `,
  viewProviders: [
    {
      provide: ControlContainer,
      useFactory: () => inject(ControlContainer, { skipSelf: true }),
    },
  ],
})
export class SearchboxComponent implements OnInit {
  formGroup!: FormGroup;

  constructor(private controlContainer: ControlContainer) {}

  ngOnInit() {
    this.formGroup = this.controlContainer.control as FormGroup;
    this.formGroup.addControl('searchbox', new FormControl('', null));
  }
}

@Component({
  selector: 'app-search-form',
  standalone: true,
  imports: [ReactiveFormsModule, SearchboxComponent, CommonModule],
  template: `
  <form [formGroup]="form" (ngSubmit)="search()">
    <ng-container *ngComponentOutlet="formComponent"></ng-container>
    <br />
    <button type="submit">Search</button>
  </form>
  `,
})
export class SearchFormComponent implements OnInit {
  @Input() formComponent: any;
  form!: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.form = this.formBuilder.group({});
  }

  search() {
    console.log('Searching...');
    console.log(this.form.value);
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SearchFormComponent, SearchboxComponent],
  template: `
    <app-search-form [formComponent]="component">
    </app-search-form>
  `,
})
export class App {
  name = 'Angular';
  component = SearchboxComponent;
}

bootstrapApplication(App);

Creating a Form in Angular That Dynamically Adds Form Controls

Answer №1

Full Code:

Check out the Stackblitz Demo

Similar questions

mat-sidenav is exempt from the fxFlex rules

Using Angular with Web API to transmit FormFile data from client to API

How can you eliminate the first elements of two or more arrays of objects until all of their first elements match based on a specific field?

What is the best way to utilize ngStyle in combination with Interpolation?

Creating a custom URL in a React TypeScript project using Class components

The sole coding platform that fails to acknowledge the "ng" command is Visual Studio Code

Error in Typescript TS2322: Observable Type 'boolean | {}' - Using Angular 5 and Typescript 2.4.2

How to disable the onChange event in PrimeNG p-dropdown?

Issue encountered while creating Next.js 13.4 application: The type 'ResolvingMetadata | undefined' does not meet the requirement of 'ResolvingMetadata'

Data from HTML not being transferred by Angular Forms

Use Ramda to convert an array of objects into nested objects

Discovering alterations in a component's attribute -Ang8

Using TypeScript generics to constrain to either a number or a string

Upon receiving data from the Api, the data cannot be assigned to the appropriate datatype within the Angular Object

add the string to the chat messages array in the observable

Is there a way to receive additional assistance?

Tips for importing a module such as 'MyPersonalLibrary/data'

Angular/NX - Element 'Component' is unrecognized, despite being imported within the module

Exploring Typescript Logging with Bunyan and Logentries

Can a component's route be dynamically changed based on its state?