Combine the values in the array with the input

Question

Combine the values in the array with the input

I received some data from the back-end which is being written to a form, and it's in the form of an array of objects

Below is the code snippet:

 this.companyDetailsForm = new FormGroup({
        directors : new FormControl(response?.companyDirectors)
    });

Next, I iterate over the data in HTML using ngFor like so:

 <div *ngFor="let director of companyDetailsForm.controls['directors'].value; let i = index" class="form-group start-aligned" style="margin-left: 69px;margin-right: 69px">
                            <label>{{'Director' | localize}} {{i+1}}</label>
                            <input disabled type="text" class="form-control" pInputText formControlName="director.name" />
                        </div>

Here is how each director object looks like:

{ "id": 51, "name": "DIRECTOR, Test" }

If you need to add the 'name' field data to the input, here's how you can do it.

javascript angular typescript

Answer 1

Answer №1

When dealing with response?.companyDirectors as an array type, it's important to note that directors is actually a FormArray, not a FormGroup.

directors : new FormArray(response?.companyDirectors)

Check out this article for more information on working with Angular Form Arrays.

Answer 2

When dealing with response?.companyDirectors as an array type, it's important to note that directors is actually a FormArray, not a FormGroup.

directors : new FormArray(response?.companyDirectors)

Check out this article for more information on working with Angular Form Arrays.

Answer 3

Answer №2

As previously discussed in another response, when dealing with an array, using a FormArray is recommended. Personally, I prefer utilizing the FormBuilder, although it's not mandatory. In cases where data is retrieved asynchronously, you can employ setControl to incorporate director names. Here's a suggested approach:

companyDetailsForm!: FormGroup;

constructor(private fb: FormBuilder) {
  this.companyDetailsForm = this.fb.group({
    directors: this.fb.array([])
  });
}

Upon receiving the data, map the names from your array like so:

this.companyDetailsForm.setControl(
  'directors',
  this.fb.array(response && response.companyDirectors && response.companyDirectors.map(x => x.name))
);

Subsequently, in the template, iterate over the form array and utilize the index as the form control:

<div formArrayName="directors">
  <div *ngFor="let director of directorsArr; let i = index">
    <input [formControlName]="i">
  </div>
</div>

The directorsArr serves as a getter for your formarray:

get directorsArr() {
  return (this.companyDetailsForm.get('directors') as FormArray).controls;
}

DEMO available for further reference.

Answer 4

As previously discussed in another response, when dealing with an array, using a FormArray is recommended. Personally, I prefer utilizing the FormBuilder, although it's not mandatory. In cases where data is retrieved asynchronously, you can employ setControl to incorporate director names. Here's a suggested approach:

companyDetailsForm!: FormGroup;

constructor(private fb: FormBuilder) {
  this.companyDetailsForm = this.fb.group({
    directors: this.fb.array([])
  });
}

Upon receiving the data, map the names from your array like so:

this.companyDetailsForm.setControl(
  'directors',
  this.fb.array(response && response.companyDirectors && response.companyDirectors.map(x => x.name))
);

Subsequently, in the template, iterate over the form array and utilize the index as the form control:

<div formArrayName="directors">
  <div *ngFor="let director of directorsArr; let i = index">
    <input [formControlName]="i">
  </div>
</div>

The directorsArr serves as a getter for your formarray:

get directorsArr() {
  return (this.companyDetailsForm.get('directors') as FormArray).controls;
}

DEMO available for further reference.

Combine the values in the array with the input

Answer №1

Answer №2

Similar questions

Difficulties with Grid Layout in React Material Design UI

Converting SQL COUNT query to angularfire2: A guide on translating Firebase / angularfire2

Experiencing difficulties with managing immutable state within ngrx framework

Can you explain the functionality of the DataTable drawCallback feature?

Updating the NPM entry point without relying on an index.js file

Utilizing ng-model with invisible input field

Structure of a GraphQL project

the undefined 'pipe' cannot be read

Unable to assign the selected attribute to a dynamically loaded Ion-select component in Ionic 2

Create a new column in Material UI Grid by adding an empty div element instead of using padding

Having trouble with the `click()` function not working on a button while using Selenium in

React Router malfunctioning on production environment when integrated with an Express backend

Triggering an event from a higher-level component to a lower-level component

What is the method for graphing data points that include two different y values?

Tips for receiving dual return values from an AJAX request

PHP encountering a bad escaped character while parsing JSON using JSON.parse

Creating, editing, and deleting data in Ng2 smart table is a seamless process that can greatly enhance

When using EcmaScript imports with the 'node16' or 'nodenext' module resolution, it is important to include explicit file extensions in relative import paths. For example, did you intend to use './*.js'?

ngOptions compare by actual value

Integrate the use of `Refresh Token` into an `Angular` application