Creating an array of Form Groups involves first initializing an empty array and then

Question

Creating an array of Form Groups involves first initializing an empty array and then

Here is a JSON object that I need to create a reactive form based on. What steps should I take for the array portion specifically?

{
    "examName" : "java",
    "password" : "1234.com",
    "examCategory" : {
        "id" : 78
    },
    "examDetailSet" : 
        [ 
            {
                "questionCategory" : {"id" : 40},
                "section" : {"id" : 7},
                "numberOfQuestions" : 3
            },
            {
                "questionCategory" : {"id" : 41},
                "section" : {"id" : 8},
                "numberOfQuestions" : 6
            }
        ],
    "expiryHours" : 6
}

abc.component.ts

// The formGroup I have created
formdata = this.fb.group({
    examName: ['', Validators.required], password: ['', [Validators.required, Validators.minLength(3)]],
    examCategory: this.fb.group({
      id: [0, Validators.required]
    }),
    examDetailSet: new FormArray([
      new FormGroup({
        questionCategory: this.fb.group({
          id: [0, Validators.required]
        }),
        section: this.fb.group({
          id: [0, Validators.required]
        }),
        numberOfQuestions: new FormControl(['', Validators.required])
      })
    ]),
    expiryHours: [0, Validators.required]
});

abc.component.html

<form [formGroup]="formdata" (submit)="onSubmit()">
  <mat-dialog-content>
    <div class="row">
      <div class="col-md-6">
...
// Truncated for brevity

-pasted image link not available-
<p>I followed the instructions provided in the answer below but now I am encountering an issue stating that it can't locate the control within the <code>examDetailSet and its controls. Any assistance would be appreciated.

angular typescript angular-reactive-forms angular9

Answer 1

Answer №1

when working with a FormArray, it is important to not only use formArrayName but also iterate over controls using the *ngFor directive as shown below:

<span formArrayName="examDetailSet">
  <div class="row" *ngFor="let group of formdata.get('examDetailSet').controls;let i=index"
     [formGroupName]="i">
    <div class="col-md-6" formGroupName="questionCategory">
    ....
</span>

To avoid "type errors", it is recommended to create getters for the formArray like this:

get examDetailArray()
{
    return this.formdata.get('examDetailSet') as FormArray
}

Then you can use it in the *ngFor loop:

  <div class="row" *ngFor="let group of examDetailArray.controls;let i=index"
     [formGroupName]="i">

You can also use [formGroup]="group" instead of [formGroupName]="i" if you prefer.

Update on how to create a FormGroup and FormArray when dealing with an object:

It's best practice to have two separate functions, one for creating the form and another for creating the formArray.

createForm(data:any)
{
    data=data || {examName:null,
                  password:null,
                  examCategory : {
                    id:0
                 },
                 examDetailSet:null 
                 expiryHours:0
             } 
    return this.fb.group({
    // form fields here
});
 }

createGroup(data)
{
   data=data || {
                questionCategory:
                  {id : 0},
                section : {id : 0},
                numberOfQuestions" : 0
            }
  return this.fb.group({
        // form fields here
      })
}

By using the "map" function, we can easily convert each element of the array into a formGroup when creating the formArray.

formData=this.createForm(null)
//or if you has data
formData=this.createForm(myObject)

If you need to add an element to the array, you can do so like this:

(formData.get('examDetailSet') as FormArray.push(this.createGroup(null))

Answer 2

when working with a FormArray, it is important to not only use formArrayName but also iterate over controls using the *ngFor directive as shown below:

<span formArrayName="examDetailSet">
  <div class="row" *ngFor="let group of formdata.get('examDetailSet').controls;let i=index"
     [formGroupName]="i">
    <div class="col-md-6" formGroupName="questionCategory">
    ....
</span>

To avoid "type errors", it is recommended to create getters for the formArray like this:

get examDetailArray()
{
    return this.formdata.get('examDetailSet') as FormArray
}

Then you can use it in the *ngFor loop:

  <div class="row" *ngFor="let group of examDetailArray.controls;let i=index"
     [formGroupName]="i">

You can also use [formGroup]="group" instead of [formGroupName]="i" if you prefer.

Update on how to create a FormGroup and FormArray when dealing with an object:

It's best practice to have two separate functions, one for creating the form and another for creating the formArray.

createForm(data:any)
{
    data=data || {examName:null,
                  password:null,
                  examCategory : {
                    id:0
                 },
                 examDetailSet:null 
                 expiryHours:0
             } 
    return this.fb.group({
    // form fields here
});
 }

createGroup(data)
{
   data=data || {
                questionCategory:
                  {id : 0},
                section : {id : 0},
                numberOfQuestions" : 0
            }
  return this.fb.group({
        // form fields here
      })
}

By using the "map" function, we can easily convert each element of the array into a formGroup when creating the formArray.

formData=this.createForm(null)
//or if you has data
formData=this.createForm(myObject)

If you need to add an element to the array, you can do so like this:

(formData.get('examDetailSet') as FormArray.push(this.createGroup(null))

Answer 3

Answer №2

Utilizing FormArray in Angular is a great way to group AbstractControl objects in an array, similar to how a FormGroup groups them in an object.

For a detailed example, you can check out the following link -

Answer 4

Utilizing FormArray in Angular is a great way to group AbstractControl objects in an array, similar to how a FormGroup groups them in an object.

For a detailed example, you can check out the following link -

Creating an array of Form Groups involves first initializing an empty array and then

Answer №1

Answer №2

Similar questions

Guide to iterating through different endpoints in a predetermined sequence

challenges with template inheritance: when one template takes precedence over another

Angular - Transform calendar dates to a lively green upon initial popup activation

"An error occurred stating that _co.JSON is not defined in

How to manipulate dates using Angular 2's date pipe to add or subtract hours

Which superclass does ReadonlyArray extend from?

Guide to resolving the issue of DELETE error 404 not found in express.js

Issue with Angular trackBy not functioning properly within a nested *ngFor loop

Exploring the directories: bundles, lib, lib-esm, and iife

Issue with Angular2 wysiwyg component failing to submitThe Angular2

JavaScript - Modifying several object properties within an array of objects

Using TypeScript to efficiently filter an Array by converting all values to lowercase

Issue encountered while attempting to package Azure project in Visual Studio 2015 Update1 due to difficulty copying Typescript files

How to Update Angular 10 ESRI Map Layers Without Reloading the Entire Map

Please ensure that the Angular Input field only allows for numbers to be entered, with the exception that the

Extending Enums in Typescript: A Comprehensive Guide

Angular 6 allows for the use of radio buttons to dynamically enable or disable corresponding fields

Getting the data from the final day of every month in a Typescript time-series object array

Showing Arrays in Angular on HTML Page

Preparing a component for evaluation