An effective method to start an Angular reactive form with various key values

Question

An effective method to start an Angular reactive form with various key values

I'm currently working on creating an Angular form with predefined key names and values that remain constant. While I have successfully built a form, the output format is not exactly what I require.

keysToChange = ['key1', 'key2', 'key3', 'key4']

export interface PatchForm {
  [x: string]: FormControl<string | null>
  date: FormControl<string | null>
}

patchForm = this.fb.group({
  keysToChange: this.fb.array<FormGroup<PatchForm>>([]),
})

  initializeForm() {
    this.keysToChange.forEach((key) => {
      const formGroup = this.fb.nonNullable.group({
        [key]: new FormControl(''),
        date: new FormControl(''),
      })
      this.patchForm.controls.keysToChange.push(formGroup)
    })
  }

I get the following output:

{
    "keysToChange": [
        {
            "key1": "",
            "date": ""
        },
        {
            "key2": "",
            "date": ""
        },
        {
            "key3": "",
            "date": ""
        },
        {
            "key4": "",
            "date": ""
        }
    ]
}

However, I need something more like this:

export interface PatchForm {
  id: FormControl<string | null>
  date: FormControl<string | null>
}

Then I would like the output to be structured as follows:

{
  "key1": {
    "id": "string",
    "date": "2024-04-03T11:23:05.499Z"
  },
  "key2": {
    "id": "string",
    "date": "2024-04-03T11:23:05.499Z"
  },
  "key3": {
    "id": "string",
    "date": "2024-04-03T11:23:05.499Z"
  },
  "key4": {
    "id": "string",
    "date": "2024-04-03T11:23:05.499Z"
  }
}

The main issue I am facing lies in creating types and initializing the form because my eslint does not allow the unsafe use of type 'any', and I am struggling to understand how to set keys for each FormGroup.

angular typescript angular-reactive-forms

Answer 1

Answer №1

To start, we must create a formGroup and then add each individual control using the addControl method along with the key name and formgroup. Below is a functional example for reference, feel free to reach out if you have any questions!

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

export interface PatchForm {
  [x: string]: FormControl<string | null>;
  date: FormControl<string | null>;
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule, CommonModule],
  template: `
    <form [formGroup]="patchForm">
      <div formGroupName="keysToChange">
        <div *ngFor="let item of iterKeys; let i = index" [formGroupName]="item">
          <input type="text" formControlName="id" id="id" name="id"/>
          <input type="date" formControlName="date" id="date" name="date"/>
        </div>
      </div>
    </form>
    {{patchForm.value | json}}
  `,
})
export class App {
  keysToChange = ['key1', 'key2', 'key3', 'key4'];
  name = 'Angular';
  fb = inject(FormBuilder);
  iterKeys: Array<string> = [];

  patchForm = this.fb.group({
    keysToChange: this.fb.group({}),
  });

  ngOnInit() {
    this.initializeForm();
  }

  initializeForm() {
    this.keysToChange.forEach((key) => {
      const formGroup = this.fb.nonNullable.group({
        id: new FormControl(''),
        date: new FormControl(''),
      });
      this.patchForm.controls.keysToChange.addControl(key, formGroup);
    });
    this.iterKeys = Object.keys(this.patchForm.controls.keysToChange.controls);
  }
}

bootstrapApplication(App);

View Stackblitz Demo

Answer 2

To start, we must create a formGroup and then add each individual control using the addControl method along with the key name and formgroup. Below is a functional example for reference, feel free to reach out if you have any questions!

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

export interface PatchForm {
  [x: string]: FormControl<string | null>;
  date: FormControl<string | null>;
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule, CommonModule],
  template: `
    <form [formGroup]="patchForm">
      <div formGroupName="keysToChange">
        <div *ngFor="let item of iterKeys; let i = index" [formGroupName]="item">
          <input type="text" formControlName="id" id="id" name="id"/>
          <input type="date" formControlName="date" id="date" name="date"/>
        </div>
      </div>
    </form>
    {{patchForm.value | json}}
  `,
})
export class App {
  keysToChange = ['key1', 'key2', 'key3', 'key4'];
  name = 'Angular';
  fb = inject(FormBuilder);
  iterKeys: Array<string> = [];

  patchForm = this.fb.group({
    keysToChange: this.fb.group({}),
  });

  ngOnInit() {
    this.initializeForm();
  }

  initializeForm() {
    this.keysToChange.forEach((key) => {
      const formGroup = this.fb.nonNullable.group({
        id: new FormControl(''),
        date: new FormControl(''),
      });
      this.patchForm.controls.keysToChange.addControl(key, formGroup);
    });
    this.iterKeys = Object.keys(this.patchForm.controls.keysToChange.controls);
  }
}

bootstrapApplication(App);

View Stackblitz Demo

Answer 3

Answer №2

export interface PatchForm2 {
    id: FormControl<string | null>
    date: FormControl<string | null>
  }

  keysToModify = ['keyA', 'keyB', 'keyC', 'keyD']

  formData = new FormGroup({});

  constructor() {
    this.setupForm();

    console.log(this.formData.value)
  }

  setupForm() {
    this.keysToModify.forEach((key) => {
      const _formData: FormGroup<PatchForm2> = new FormGroup({
        id: new FormControl(''),
        date: new FormControl(''),
      });

      this.formData.addControl(key, _formData)
    })
  }

result

{
    "keyA": {
        "id": "",
        "date": ""
    },
    "keyB": {
        "id": "",
        "date": ""
    },
    "keyC": {
        "id": "",
        "date": ""
    },
    "keyD": {
        "id": "",
        "date": ""
    }
}

Answer 4

export interface PatchForm2 {
    id: FormControl<string | null>
    date: FormControl<string | null>
  }

  keysToModify = ['keyA', 'keyB', 'keyC', 'keyD']

  formData = new FormGroup({});

  constructor() {
    this.setupForm();

    console.log(this.formData.value)
  }

  setupForm() {
    this.keysToModify.forEach((key) => {
      const _formData: FormGroup<PatchForm2> = new FormGroup({
        id: new FormControl(''),
        date: new FormControl(''),
      });

      this.formData.addControl(key, _formData)
    })
  }

result

{
    "keyA": {
        "id": "",
        "date": ""
    },
    "keyB": {
        "id": "",
        "date": ""
    },
    "keyC": {
        "id": "",
        "date": ""
    },
    "keyD": {
        "id": "",
        "date": ""
    }
}

An effective method to start an Angular reactive form with various key values

Answer №1

Answer №2

Similar questions

Managing the ERR_NAME_NOT_RESOLVED issue

Automatically identify the appropriate data type using a type hint mechanism

Learn the process of adjusting the Time Zone in Angular2-HighCharts!

What is the proper way to arrange dates within strings in Angular?

SweetAlert2 not displaying properly in Ionic6 - troubleshooting the issue

The TypeScript compiler within WebStorm recognizes the TSConfig.json file as a valid TypeScript file

Issue with Angular2 not able to call POST method in CodeIgniter RESTful API resulting in 404 error

Is it possible to access the generic type that a different generic type inherits in TypeScript?

What is the best way to retrieve a plus sign from a URL parameter?

Angular: Implementing a canActivate guard to restrict redirects exclusively from a specific component

What steps should I take to address conflicting type identifiers between Cypress and jQuery?

What is the reason behind having to coerce the enum value before the object type can be properly recognized?

The hook from Supabase is facing issues with proper importing

Angular: Automatically update HTML content once promise is resolved

The array is populated with elements, yet the size remains zero

Troubleshooting tips for resolving issues with an Express Router using GET requests

The default route in Angular is always preloaded and ready to be

Is there a way for me to retrieve the callback parameters?

The NextJS application briefly displays a restricted route component

Having trouble assigning the class property in Angular 5