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

Tips for receiving @ mentions in PrimeNg Editor using Quill and quill-mention with Angular

The ng build command encounters a failure (module cannot be found) when running in a docker environment on Ubuntu, while it successfully runs

What is the correct way to define the onClick event in a React component?

Is it possible to generate a user profile using Firebase Cloud Functions and assign the user id as the document id?

Ways to eliminate the white background gap between pages on ionic

Exploring the @HostBinding argument in Angular directives

How to handle a property that is not found in a combined type in TypeScript?

Incorporate a 'Select All' functionality into ion-select by adding a dedicated button

When is the right time to develop a new component?

Add a new item to an array in Angular 2 when a click event occurs

Unable to bring in an exported class from a TypeScript file

What improvements can I implement in this React Component to enhance its efficiency?

Exploring methods to access specific values from an array containing multiple values using Lodash in Angular 4

How to identify alterations in user input within Angular?

Declaration files for Typescript ESLint configurations

What is the best way to pass the answerId in the action that I am dispatching, when the answerId is nested within an array object within another array object in

Angular2 - Issue with calling toPromise() method on this.http.get() function, as it is not recognized

Error Message: "Module not found - Module TS2307 cannot be located

When no values are passed to props in Vue.js, set them to empty

What could be the reason for TypeScript throwing an error that 'product' does not exist in type '{...}' even though 'product' is present?