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

In the Node environment, why does null evaluate as less than 3 while also being greater than 3?

I'm currently working with ReactJS and attempting to retrieve JSON data from a REST API in JIRA, but I'm facing challenges in achieving this

Tips on adding TypeScript annotations to an already existing global function

The difference between importing CSS in JavaScript and importing it directly in CSS lies in the way

Error encountered when extending Typography variant in TypeScript with Material UI v5: "No overload matches this call"

When the input field is clicked, the file:/// URL is sent

The jquery function is functioning properly, but it only behaves as expected when clicked

What is the best way to retrieve the value of a text box in VUEjs using its unique identifier?

Showing off HTML tags within react-json-tree

The checkbox component is currently not displaying on the ngx-datatable

What are some ways to customize the appearance of gridlines in a PrimeNG p-table?

React-Redux: Unable to access the 'closed' property as it is undefined

Building Unique Password Validation with Angular 5

Place information from an input field into a specific row within a table

Despite using Vue and Vuex with Axios asynchronously, the getters are still returning an empty array

Tips for customizing the border of an outlined TextField in MUI

Adding a JavaScript variable into a Django template tag

Encountering a problem with TypeScript while employing Promise.allSettled

What is the best way to send multiple variables to a url using jQuery ajax?

New feature in Safari extension: transferring window object from inject script to global page