Tips for accessing the nested formArray value using a getter in Angular

I am currently attempting to retrieve form values using the getter method and then dynamically pushing them to update the form with values. However, I am faced with a nested array at the moment, which is causing issues with retrieving the form values.

Below is the code to retrieve the formArrays of the 0th position.

get detailsControl(): FormArray { return this.dataForm.get(['info_details','0' ,'subinfo']) as FormArray; };

Instead of using '0', how can I pass 'i' so that I can retrieve the entire nested formArray instead?

Answer №1

It seems like you are looking to retrieve the entire FormArray with your getter function. In that case, all you need is this,

return this.dataForm.get('myFormArray') as FormArray;

Alternatively, if you need to access a specific control at an index within the FormArray, you can do so like this,

public getControlAtIndex(index: number): AbstractControl {
  let myFormArray: FormArray = myForm.get('myFAControl') as FormArray;
  return myFormArray.at(index);
}

If the control at a certain index is a FormArray, using this function to query that index will return the entire nested FormArray. There are also other methods for retrieving the index value of a FormArray. You can find more information in this answer.

However, your approach seems a bit off. It appears that you are attempting to update the form value with what it already contains. If you want to set the initial value for each control in a FormArray, you can use something like this,

for(let i = 0; i < myFormArray.controls.length; i++) {
  myFormArray.at(i).setValue(myVals[i]);
} 

Or,

myFormArray.setValue(["val1", "val2", ...]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting Angular 6: Issues with Route Guards not functioning as expected

Striving to enhance frontend security by restricting access to specific IDs. The goal is to redirect anyone trying to access routes other than /login/:id to a page-not-found error message if not already logged in, but encountering some issues. Below are t ...

Retrieve class property in Angular by its name

How can I retrieve an array from a class like the one below without using a switch statement, dictionary, or other collection to look up the name passed into the method? export class ProcessOptions { Arm = [{ name: 'Expedited Review ("ER") ...

Learn how to mock asynchronous calls in JavaScript unit testing using Jest

I recently transitioned from Java to TypeScript and am trying to find the equivalent of java junit(Mockito) in TypeScript. In junit, we can define the behavior of dependencies and return responses based on test case demands. Is there a similar way to do t ...

Error in TypeScript when using keyof instead of literal in type pattern.Beware of TypeScript error when not

let c = { [X in keyof { "foo" }]: { foo: "bar" } extends { X } ? true : false }["foo"]; let d = { foo: "bar" } extends { "foo" } ? true : false; c and d should both return true, but surprisingly, c is eval ...

Steps for Loading HTML5 Video Element in Ionic 2

Struggling to showcase a list of videos from my server, here's the issue I'm encountering and the layout of the app. https://i.stack.imgur.com/HWVt3.png This is the code snippet in HTML: <ion-list> <button ion-item *ngFor="let v ...

Adding an object dynamically to a JSON array: Step-by-step guide

I am facing a challenge trying to dynamically add an attribute inside each object within my JSON array. Unfortunately, I have not been successful in achieving this as my new object is being appended at the end of the JSON which is not the desired outcome. ...

Encountering an issue with a custom hook causing an error stating "Attempting to access block-scoped variable 'X' before its declaration."

Currently, I am in the process of developing my initial custom hook. My confusion lies in the fact that an error is being displayed, even though the function is defined just a few lines above where it's invoked. Here is the relevant code snippet: f ...

Having trouble with NextJS TypeScript and the randomUUID?() function? If you're seeing the error TS2386 that says "Overload signatures must all be

In my project setup, I have a mono-repo structure utilizing Lerna for managing 2 NextJS projects and 1 shared project. I recently attempted to integrate typescript. The NextJS projects seem to be functioning correctly (following the documentation), but I ...

Prevent the onclick function of a span element from being triggered when the user clicks on a dropdown menu contained within

Just delving into the world of web development and currently tackling a React project. Encountered an issue where I need to make a span element clickable. However, there's a dropdown within that span that doesn't have any onClick event attached t ...

Error Message: Attempting to access the AngularJS injector before it has been initialized

Using AngularJS Service in an Angular 5 Component I have an existing AngularJS application and I am attempting to create a hybrid app. However, I am encountering difficulties using an AngularJS service within an Angular component, resulting in the followi ...

Iterating through an array and setting variables according to asynchronous code

I have created a function to loop through an array, call a promise, and update a variable based on the result. The code seems to be functioning correctly, but I am wondering if there is a more optimal way to write it. Any suggestions are appreciated. Tha ...

Top method in Angular 6 for verifying if a scrollable section has been scrolled to the very bottom

I am searching for a reliable solution in Angular 6 to determine whether a scrollable host component has reached its maximum scroll bottom. Despite my efforts, I have been unsuccessful in finding a functioning example of a function that can detect if a cu ...

Angular's ng-select fails to select the value when generating the dynamic control

Currently, I am working on dynamically adding cities using ng-select in order to have search functionality while entering city names. For example, if I have two city names saved in a form and need to display them in separate ng-select controls when editing ...

Optimal strategies for managing request and response within an Express application

I've developed a REST API using express (and typescript) with the following structure: app.ts routes controllers models Query: Where is the ideal location to handle and construct requests/responses? Is it in routes or controllers? I am ...

Looking to execute multiple programs simultaneously within the prestart script in the package.json file, and bypass any exit error codes

I need to run yarn tsc and yarn lint during every yarn start to identify any code errors. This is how my scripts property is set up: "scripts": { "start": "expo start", "android": "expo start --android" ...

Error in Angular 8: The type of '[object Object]' is an object, whereas NgFor only supports binding to Iterables such as Arrays

I recently started using Angular 8 and I'm dealing with an issue while trying to fetch data from an http get request. I am attempting to iterate through the data using *ngFor but unfortunately encountering this error. Any suggestions on how to resolv ...

Organizing Angular and Express Files

I've been researching the best way to structure Angular and Express, reading numerous articles and posts on the topic. Now I'm left wondering - should I share the same node_modules folder for both Angular and Express, or keep them separate? My c ...

Retrieving the selector name from a JSON in Angular 2

I'm looking to create a dynamic form where element details will be sourced from JSON data. This is the JSON structure I have: { "FormElements": [ { "selectorName": "text-input", "id": "", "class": "location", "nam ...

Looking to retrieve the smallest amount of array sets in Angular4

I'm currently developing an Angular 4 application and facing an issue with a function I'm trying to write. The goal is to extract the minimum and maximum numbers from three array objects. The yAxisData object consists of three yaxis array objects ...

Is it possible to distinguish between a programmatic click and a user click in Angular?

Consider this scenario: <li (click)="clicked($event)">click me</li> Is there a way to determine if the event was triggered programmatically or by the user inside the function? I have tried using jQuery but couldn't figure out a way to ...