How Can I Build a Dynamic Field Form Builder in Angular 4?

Question

How Can I Build a Dynamic Field Form Builder in Angular 4?

While working with dynamic JSON data, I needed to create fields dynamically. For instance, if my JSON array contains 3 values, I would generate 3 input checkboxes dynamically as shown below:

<ng-template ngFor let-numberOfRow [ngForOf]="numberOfRows">
   <mat-checkbox [formControlName]="numberOfRow.row" [value]="numberOfRow.row" [name]="numberOfRow.row">All</mat-checkbox>
</ng-template>

Currently, I am facing difficulties in creating a formBuilder for these fields. Can anyone guide me on how to declare formbuilder for dynamic fields?

public ngOnInit() {
   this.myForm= this.fb.group(this.formFields);
}
public formFields() {
    let empArr = [];
    for (let val of this.myArrayList) {
        empArr.push(val + ": ''");
    }
    let allFields = '{' + empArr.join(',') + '}';
    return allFields;
}

The function above (formFields) will return a string in the format

{ allRow: '', firstRow: '', secondRow: '', thirdRow: '' }

.

Instead of statically declaring the form fields like

this.myForm= this.fb.group({ allRow: '', firstRow: '', secondRow: '', thirdRow: '' });

, I am looking for a way to declare them dynamically.

angular typescript

Answer 1

Answer №1

To achieve this, start by constructing the FormControl programmatically using the control method from the FormBuilder. After that, utilize the addControl method found in FormGroup. Here's an example:

this.myForm.addControl('controlName', 
   this.fb.control({ disabled: false, value: controlValue }, validators, asyncValidators));

Next, you have to connect it using the FormControlDirective, not the FormControlName, since the control has already been created. The connection will appear as follows:

<mat-checkbox [formControl]="myForm.controls['controlName']" [value]="numberOfRow.row" [name]="numberOfRow.row">All</mat-checkbox>

Answer 2

To achieve this, start by constructing the FormControl programmatically using the control method from the FormBuilder. After that, utilize the addControl method found in FormGroup. Here's an example:

this.myForm.addControl('controlName', 
   this.fb.control({ disabled: false, value: controlValue }, validators, asyncValidators));

Next, you have to connect it using the FormControlDirective, not the FormControlName, since the control has already been created. The connection will appear as follows:

<mat-checkbox [formControl]="myForm.controls['controlName']" [value]="numberOfRow.row" [name]="numberOfRow.row">All</mat-checkbox>

Answer 3

Answer №2

According to @charlietfl, the issue was that I was sending string data instead of an object. Now, I have updated it to send as an object like in the code below and it is functioning correctly.

public ngOnInit() {
    this.myForm= this.fb.group(this.formFields());
 }
 public formFields() {
     let empObj = {};
     for (let value of this.myArrayList) {
         empObj[value] = '';
     }
     return empObj;
 }

So, the method above, formField, created an object like

{ allRow: '', firstRow: '', secondRow: '', thirdRow: '' }

, which resolved the issue. Thank you to everyone who helped :)

Answer 4

According to @charlietfl, the issue was that I was sending string data instead of an object. Now, I have updated it to send as an object like in the code below and it is functioning correctly.

public ngOnInit() {
    this.myForm= this.fb.group(this.formFields());
 }
 public formFields() {
     let empObj = {};
     for (let value of this.myArrayList) {
         empObj[value] = '';
     }
     return empObj;
 }

So, the method above, formField, created an object like

{ allRow: '', firstRow: '', secondRow: '', thirdRow: '' }

, which resolved the issue. Thank you to everyone who helped :)

Answer 5

Answer №3

Example of using formBuilder to build a dynamic form:

component.ts

  form: FormGroup;

  constructor(
    private fb: FormBuilder
  ) { }

  ngOnInit() {
    this.form = this.fb.group({
      dropOffAddress : ['', Validators.required]
    })

  }

  addInput() {
    this.form.addControl(`input-${Object.keys(this.form.value).length}`, new FormControl('', [Validators.required]))
  }

  removeInput(key: string) {
    this.form.removeControl(key)

  }

component.html

<form [formGroup]="form" *ngIf="show">
  <ng-container *ngFor="let f of form.controls | keyvalue">
    <mat-form-field appearance="outline" class="w-100" color="primary">
      <mat-label>Label of Input</mat-label>
      <mat-icon (click)="addInput()" color="accent" matPrefix>add</mat-icon>
      <input type="text" [formControlName]="f.key" [name]="f.key" autofocus matInput placeholder="Enter an address">
      <mat-icon (click)="removeInput(f.key)" matSuffix>remove</mat-icon>
      <mat-error *ngIf="form.invalid">Please fill out the field</mat-error>
    </mat-form-field>
  </ng-container>
</form>

Answer 6

Example of using formBuilder to build a dynamic form:

component.ts

  form: FormGroup;

  constructor(
    private fb: FormBuilder
  ) { }

  ngOnInit() {
    this.form = this.fb.group({
      dropOffAddress : ['', Validators.required]
    })

  }

  addInput() {
    this.form.addControl(`input-${Object.keys(this.form.value).length}`, new FormControl('', [Validators.required]))
  }

  removeInput(key: string) {
    this.form.removeControl(key)

  }

component.html

<form [formGroup]="form" *ngIf="show">
  <ng-container *ngFor="let f of form.controls | keyvalue">
    <mat-form-field appearance="outline" class="w-100" color="primary">
      <mat-label>Label of Input</mat-label>
      <mat-icon (click)="addInput()" color="accent" matPrefix>add</mat-icon>
      <input type="text" [formControlName]="f.key" [name]="f.key" autofocus matInput placeholder="Enter an address">
      <mat-icon (click)="removeInput(f.key)" matSuffix>remove</mat-icon>
      <mat-error *ngIf="form.invalid">Please fill out the field</mat-error>
    </mat-form-field>
  </ng-container>
</form>

Answer 7

Answer №4

I organize a list containing the names of fields in a json object, alongside an array holding the form controls. Subsequently, I loop through the field names to generate checkboxes for the form.

JavaScript file:

import { FormBuilder, FormGroup } from '@angular/forms';

export class SomeComponent
{
  form!: FormGroup;
  fieldNames: string[];
  formControls: any;

  constructor(
    private formBuilder: FormBuilder,
  )
  {
      const someJsonObject = {env: "Dev", name: "SRV", ver: "21.1" };
      this.fieldNames= [];
      this.formControls= {};

      Object.keys(someJsonObject).forEach(currentFieldName => {
        // adding the current field name to the fieldNames array
        this.fieldNames.push(currentFieldName);

        // creating a boolean formControl for each field
        this.formControls[currentFieldName] = [true];
      });
            
      // incorporating formControls into the form
      this.form = this.formBuilder.group(this.formControls);
  }
}

HTML Template file:

<form [formGroup]="form">
    <ng-container *ngFor="let currentFormControl of fieldNames">
        <div><mat-checkbox formControlName="{{ currentFormControl }}">{{ currentFormControl }}</mat-checkbox></div>
    </ng-container>
</form>

Answer 8

I organize a list containing the names of fields in a json object, alongside an array holding the form controls. Subsequently, I loop through the field names to generate checkboxes for the form.

JavaScript file:

import { FormBuilder, FormGroup } from '@angular/forms';

export class SomeComponent
{
  form!: FormGroup;
  fieldNames: string[];
  formControls: any;

  constructor(
    private formBuilder: FormBuilder,
  )
  {
      const someJsonObject = {env: "Dev", name: "SRV", ver: "21.1" };
      this.fieldNames= [];
      this.formControls= {};

      Object.keys(someJsonObject).forEach(currentFieldName => {
        // adding the current field name to the fieldNames array
        this.fieldNames.push(currentFieldName);

        // creating a boolean formControl for each field
        this.formControls[currentFieldName] = [true];
      });
            
      // incorporating formControls into the form
      this.form = this.formBuilder.group(this.formControls);
  }
}

HTML Template file:

<form [formGroup]="form">
    <ng-container *ngFor="let currentFormControl of fieldNames">
        <div><mat-checkbox formControlName="{{ currentFormControl }}">{{ currentFormControl }}</mat-checkbox></div>
    </ng-container>
</form>

How Can I Build a Dynamic Field Form Builder in Angular 4?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilizing symbols as a keyof type: A simple guide

Encountering an issue with NextJS 13 when utilizing the vectorstore recommended by Langchain, specifically receiving an error message stating that HNSWLib

Displaying a portion of the chart's key in a Highcharts BarChart

Develop a flexible axios client

The error message states that the argument type '(src: Observable<any>) => Observable<any>' cannot be assigned to a parameter of type 'OperatorFunction<Object, any>'

Getting pictures dynamically from the backend with unspecified file types

Is it possible to implement lazy loading for data in TypeScript classes?

TypeScript - Variable is inferred to have type 'any' in certain locations where its type cannot be accurately determined

Library for Typescript on npm

Creating composite type guards - passing down properties from the type guard to the calling function

Can the automatic casting feature of TypeScript be turned off when dealing with fields that have identical names?

Using templateUrl from a remote server in Angular 2 can be achieved by specifying the complete URL

Having trouble retrieving information from Node.js service in AngularJS 2

Utilize string values as identifiers in type declarations

What is the best way to dynamically update styleUrls or style properties in Angular?

TS2531: Nullability detected in object when using .match() method

Updating the date format of [(ngModel)] with the ngx-datepicker library

What is the best way to make an Angular Material checkbox respond to a programmatic change in value within a reactive form?

The child component stays consistent across all Angular routing configurations

Using Typescript to iterate through an array of objects and modifying their keys using the forEach method