Methods for assigning values to a formControl using an array

Question

Methods for assigning values to a formControl using an array

I have an array of objects and I am attempting to loop through the array, dynamically setting values to a formControl and not displaying anything if the value is null. I have searched for similar solutions but haven't found any references or examples so far.

.html

<form [formGroup]="testForm">
  <div class="class" *ngFor="let item of items">
    <span>{{ item.name }}</span>
    <span>{{ item.email }}</span>
    <div>
      <input type="text" formControlName="number">
    </div>
  </div>
</form>

.ts

testForm: FormGroup;

  items: any[] = [
    {
      name: 'Rob',
      email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ad8e5e8cafeeff9fea4e9e5e7">[email protected]</a>',
      number: 1234
    },
    {
      name: 'Mack',
      email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f426e6c644f7b6a7c7b216c6062">[email protected]</a>',
      number: 9876
    },
    {
      name: 'Mack',
      email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5914383a32192d3c2a2d773a3634">[email protected]</a>',
      number: null
    }
  ];
  get number() {
    return this.testForm.get('number');
  }

  ngOnInit() {
    this.testForm = this.formBuilder.group({
      number: [this.items[0].number, [Validators.required]]
    });
  }

javascript angular typescript

Answer 1

Answer №1

I successfully managed to achieve the desired data display, but it involved a complex process. You're making good progress, but you won't be able to obtain the expected outcome without utilizing a formArray.

For further reference and code demonstration, check out this Stackblitz Link - click here

.html

<form [formGroup]="testform">
  <div *ngFor="let item of itemArray;let i = index" formArrayName="items" >
    <div [formGroupName]="i">
          <span>{{ item.controls.name.value }}</span>
          <span>{{ item.email}}</span>
          <div>
            <input type="text" formControlName="number">
          </div>
    </div> 
  </div>
</form>

.ts

import { Component, OnInit } from "@angular/core";
import { FormGroup, FormBuilder, FormArray, Validators } from "@angular/forms";
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  public testform: FormGroup;
    public data: any[] = [
    {
      name: 'Rob',
      email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30625f5270445543441e535f5d">[email protected]</a>',
      number: 1234
    },
    {
      name: 'Mack',
      email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d19cb0b2ba91a5b4a2a5ffb2bebc">[email protected]</a>',
      number: 9876
    },
    {
      name: 'Mack',
      email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="450824262e05312036316b262a28">[email protected]</a>',
      number: null
    }
  ];
  public itemGroup: FormArray;

  constructor(private fb: FormBuilder) {
    const arryOfItemGroup = this.data.map(item => {
      return this.createItemGroup(
        item.name,
        item.email,
        item.number
      );
    });
    this.testform = this.fb.group({
      items: this.fb.array(arryOfItemGroup)
    });
  }

  ngOnInit() {}

  get itemArray() {
    return this.testform.get("items")["controls"] as FormArray;
  }

  private createItemGroup(name, email, number) {
    return this.fb.group({
      name: [name],
      email: [email],
      number: [number]
    });
  }

}

Answer 2

I successfully managed to achieve the desired data display, but it involved a complex process. You're making good progress, but you won't be able to obtain the expected outcome without utilizing a formArray.

For further reference and code demonstration, check out this Stackblitz Link - click here

.html

<form [formGroup]="testform">
  <div *ngFor="let item of itemArray;let i = index" formArrayName="items" >
    <div [formGroupName]="i">
          <span>{{ item.controls.name.value }}</span>
          <span>{{ item.email}}</span>
          <div>
            <input type="text" formControlName="number">
          </div>
    </div> 
  </div>
</form>

.ts

import { Component, OnInit } from "@angular/core";
import { FormGroup, FormBuilder, FormArray, Validators } from "@angular/forms";
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  public testform: FormGroup;
    public data: any[] = [
    {
      name: 'Rob',
      email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30625f5270445543441e535f5d">[email protected]</a>',
      number: 1234
    },
    {
      name: 'Mack',
      email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d19cb0b2ba91a5b4a2a5ffb2bebc">[email protected]</a>',
      number: 9876
    },
    {
      name: 'Mack',
      email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="450824262e05312036316b262a28">[email protected]</a>',
      number: null
    }
  ];
  public itemGroup: FormArray;

  constructor(private fb: FormBuilder) {
    const arryOfItemGroup = this.data.map(item => {
      return this.createItemGroup(
        item.name,
        item.email,
        item.number
      );
    });
    this.testform = this.fb.group({
      items: this.fb.array(arryOfItemGroup)
    });
  }

  ngOnInit() {}

  get itemArray() {
    return this.testform.get("items")["controls"] as FormArray;
  }

  private createItemGroup(name, email, number) {
    return this.fb.group({
      name: [name],
      email: [email],
      number: [number]
    });
  }

}

Methods for assigning values to a formControl using an array

Answer №1

Similar questions

Best practices for utilizing ngrx/store in Angular 2

Asynchronous requests in Node.js within an Array.forEach loop not finishing execution prior to writing a JSON file

Improving type checking by extracting constant string values from a union type

Embedding an Iframe in Angular 2 directly from the database

Employing on() for triggering a form submission

How can we retrieve an API response using Fetch, manipulate it with JSON.stringify(), and what are the next steps in

Two adjacent iframes, where the first one serves as a sidebar containing hyperlinks that, when clicked, will display the corresponding content within the second

Searching for a different method in JavaScript that can add items without duplication, as the prependTo function tends to insert multiple items

The error message indicates that the Worklight adapter is an object, not a function

Create a list that starts with a header determined by an object's attribute within an array

What is the best way to isolate the CSS of individual components in Angular 2?

What is the correct way to establish a Cookie (header) using XMLHttpRequest in JavaScript?

Adjust the code to enhance the functionality of web components in Sharepoint

script locate the div ID within a given text and clear its content

What is the process for modifying the characteristics of an RMWC Component?

Exploring jQuery Mobile - What Causes an Empty State?

The attribute 'positive_rule' is not found within the structure '{ addMore(): void; remove(index: any): void;'

Invoking a function within a functional component from a React element

Having difficulty creating a snapshot test for a component that utilizes a moment method during the rendering process

Updating language settings on-the-fly in a Vue application does not automatically refresh the translated content displayed on the website