Adding dynamic values to nested form groups in Angular Form Array

Question

Adding dynamic values to nested form groups in Angular Form Array

After following a tutorial on creating a reactive form in an Angular application, I managed to implement it successfully. However, I encountered an issue when trying to add an additional control called "setNumber" to the form array. I want this control to auto-populate in the form based on the component iteration, instead of being manually inputted through the "name" and "gender" fields.

My StackBlitz code can be found here, in which I have included "setNumber" as its own input field within the form. While it works fine on my local machine, I am receiving a type error on StackBlitz. Despite this, the code functions as intended.

View the application screenshot here

Although I have tried using property binding to automatically populate the setNumber in the userArray within the component, I have not been successful so far. Any assistance in resolving this issue would be greatly appreciated!

Thank you

javascript angular typescript forms angular-reactive-forms

Answer 1

Answer №1

If you're facing a challenge, one possible solution involves updating your FormArray using a pipe. However, it's important to consider implementing the ControlValueAccessor interface to enable seamless communication between parent and child Forms without altering the data. Make sure to explore the capabilities of the IndexedFormPipe.

Check out this Stackblitz for more information.

Answer 2

If you're facing a challenge, one possible solution involves updating your FormArray using a pipe. However, it's important to consider implementing the ControlValueAccessor interface to enable seamless communication between parent and child Forms without altering the data. Make sure to explore the capabilities of the IndexedFormPipe.

Check out this Stackblitz for more information.

Answer 3

Answer №2

I made some adjustments in your stackblitz to resolve the type errors. Specifically, I added form1: FormGroup in InputArrayComponent and made sure to address errors related to importing scss files.

If you simply need to pass the value of i+1 to the input component and set it as the value for the FormControl of "setNumber," you can add an Input() property in InputComponent (I named it index):

@Input() index: number;

In the InputArrayComponent template, you can then pass i+1 to the inputComponent like so:

<app-input [index]="i+1" [inputFormGroup]="$any(u)"></app-input>

To assign the value in ngOninit() for the inputArray, use the following:

this.inputFormGroup.get('setNumber').setValue(this.index);

Check out the updated stackblitz here:

https://stackblitz.com/edit/angular-ivy-2rwlwu?file=src/app/views/input/input.component.html

--- EDIT ---

After your comment regarding issues with deleting users and the index not updating, I implemented a set function to handle automatic index updates whenever the input changes:

@Input() set i(value: number) {
   this.index = value;
   this.inputFormGroup.get('setNumber')?.setValue(value);
};

However, please note that this approach may overwrite any user-made changes to setNumber. Alternatively, you can replace the input with a label displaying the index value, ensuring it remains visible but uneditable.

I've created a new version of the stackblitz with these modifications:

https://stackblitz.com/edit/angular-ivy-hhhz9m?file=src/app/views/input/input.component.html

Answer 4

I made some adjustments in your stackblitz to resolve the type errors. Specifically, I added form1: FormGroup in InputArrayComponent and made sure to address errors related to importing scss files.

If you simply need to pass the value of i+1 to the input component and set it as the value for the FormControl of "setNumber," you can add an Input() property in InputComponent (I named it index):

@Input() index: number;

In the InputArrayComponent template, you can then pass i+1 to the inputComponent like so:

<app-input [index]="i+1" [inputFormGroup]="$any(u)"></app-input>

To assign the value in ngOninit() for the inputArray, use the following:

this.inputFormGroup.get('setNumber').setValue(this.index);

Check out the updated stackblitz here:

https://stackblitz.com/edit/angular-ivy-2rwlwu?file=src/app/views/input/input.component.html

--- EDIT ---

After your comment regarding issues with deleting users and the index not updating, I implemented a set function to handle automatic index updates whenever the input changes:

@Input() set i(value: number) {
   this.index = value;
   this.inputFormGroup.get('setNumber')?.setValue(value);
};

However, please note that this approach may overwrite any user-made changes to setNumber. Alternatively, you can replace the input with a label displaying the index value, ensuring it remains visible but uneditable.

I've created a new version of the stackblitz with these modifications:

https://stackblitz.com/edit/angular-ivy-hhhz9m?file=src/app/views/input/input.component.html

Adding dynamic values to nested form groups in Angular Form Array

Answer №1

Answer №2

Similar questions

How does TypeScript provide me with insights even before compiling with tsc?

How can I stop TypeScript from causing my builds to fail in Next.js?

The module named "mongoose" does not have any member called 'PaginateResult' exported

Having trouble retrieving the necessary data to generate a menu, the getStaticProps function is coming back as undefined

"Authentication guard does not sit idle while waiting for the observable

Combining two JSON arrays into a single array using Node.js

Setting the value for a textbox using Jquery's .val() function works, while .attr() does not have the

Sequelize Error: Cannot call User.hasMany as a function

Module-alias cannot be resolved by esm

Methods for decoding a JSON object and iterating through its contents

Issue with exporting member in VS Code but not in console

How can I send extra information along with my Ajax request in jQuery UI Autocomplete?

What is the Ideal Location for Storing the JSON file within an Angular Project?

Tips for resolving the issue of dropdown menus not closing when clicking outside of them

Firebase functions are giving me a headache with this error message: "TypeError: elements.get is not

Despite having a result, the Promise is returning an undefined value

Vue component prop values are not properly recognized by Typescript

Attempting HTTP requests on an iOS simulated device using Ionic Capacitor is not functioning properly

Error message displaying "Invalid ID attribute in HTML 5 input"

Can you extract debugging details from an ajax preflight inquiry?