Creating formGroups dynamically within an ngFor loop inside an accordion

Question

Creating formGroups dynamically within an ngFor loop inside an accordion

I am facing a challenge with an accordion feature that generates a specified number of sections x based on user input. Here is an example:

https://i.sstatic.net/QjmkW.png

After creating the sections, I need to load employee information into each section separately. However, when I load the information in one form, it gets duplicated in all other forms:

https://i.sstatic.net/StIw2.jpg

I attempted to resolve this by using an array of formGroups in my TypeScript code and differentiating them using the ngFor index, like so:

https://i.sstatic.net/HkfVa.png

Unfortunately, my attempts have not been successful.

angular typescript ionic-framework

Answer 1

Answer №1

To effectively manage multiple form controls, consider using FormArray.

this.formName = this.formBuilder.group({
   'formArrayName': this.formBuilder.array([
    this.init(),
  ]),
});

 init() {
   return this.formBuilder.group({
          'id': ['', Validators.compose([Validators.required])],
          'name': ['', Validators.compose([Validators.required])],
          'phone_number': ['', Validators.compose([Validators.required])],
           ...
        });
 }

For additional guidance on implementing nested model-driven forms in Angular 2, check out this example: https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

Answer 2

To effectively manage multiple form controls, consider using FormArray.

this.formName = this.formBuilder.group({
   'formArrayName': this.formBuilder.array([
    this.init(),
  ]),
});

 init() {
   return this.formBuilder.group({
          'id': ['', Validators.compose([Validators.required])],
          'name': ['', Validators.compose([Validators.required])],
          'phone_number': ['', Validators.compose([Validators.required])],
           ...
        });
 }

For additional guidance on implementing nested model-driven forms in Angular 2, check out this example: https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

Creating formGroups dynamically within an ngFor loop inside an accordion

Answer №1

Similar questions

Tips for managing Angular modules post-splitting and publishing on npm

"Utilizing Postgresql with TypeORM for filtering many-to-many relationships

What sets Angular 2/4 apart is the synchronous nature of Reactive forms, contrasting with the asynchronous behavior of template-driven forms

Using scrollIntoView() in combination with Angular Material's Mat-Menu-Item does not produce the desired result

Share data between methods in Angular 6

Stopping the subscription to an observable within the component while adjusting parameters dynamically

When using expressjs and typescript, you may encounter an error stating that the type 'typeof <express.Router>' cannot be assigned to the parameter type 'RequestHandlerParams'

Using Rails 5 API to generate a new object using JSON with nested resources

The NodeJS server is struggling to fetch post data sent from Angular

Leveraging the npm package ssh2 in an Angular2 application operating within the Electron framework

What sets Import apart from require in TypeScript?

Issue with OpenAI's Rate Limit 429 Restriction

Downloading videos from WebRTC getDisplayMedia in Angular 8 is not supported

Can a TypeScript function be structured to return never (or throw) if a generic type extends a subtype without requiring casting?

Bring in styles from the API within Angular

Encountered an issue while trying to access a property that is undefined in the

Integration of HostConfig with AdaptiveCards

The array does not yield any values when utilizing Angular CLI

Utilizing mapped types in a proxy solution

What is the best way to access data from a local JSON file in Gatsby when using TypeScript and GraphQL?