Angular Iterate Array Forms

Question

Angular Iterate Array Forms

Is there a way to iterate my rows based on user input? For example, if the user enters 2 values, I need to display 2 rows. How can I achieve this using FormArray?

setCount(count:any){
    console.log(count);
    this.count = count;
    this.countArray = Array(parseInt(count)).fill(0).map((x,i)=>i);

  }


  <mat-form-field class="full-width">
                                <mat-label>Qty</mat-label>
                                <input matInput type="number" formControlName="qty" value="0" (click)="setCount($event.target.value)">
                            </mat-form-field>


<tr *ngFor="let Array of Array.controls; let i = index;" [formGroupName]="i">
                            <td>
                                
                            </td>
                            <td>
                                <input type="text" formCOntrol="Number" class="form-control" style="width:700px">
                                </td>
                        </tr>

Here is an illustration:

https://stackblitz.com/edit/angular-pgwv3t

angular typescript rxjs

Answer 1

Answer №1

Here is a different approach

  formGroup: FormGroup;

  get itemsArray(): FormArray {
    return this.formGroup.get('items') as FormArray;
  }

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      itemCount: [0],
      items: this.formBuilder.array([]),
    });
    this.formGroup.get('itemCount').valueChanges.subscribe((result) => {
      for (let j = this.itemsArray.length; j < result; j++) {
        this.itemsArray.push(this.addItems());
        console.log(this.itemsArray);
      }
    });
  }

  addItems(): FormGroup {
    return new FormGroup({
      itemValue: new FormControl(0, { validators: [Validators.required] }),
    });
  }

check out the example code

Answer 2

Here is a different approach

  formGroup: FormGroup;

  get itemsArray(): FormArray {
    return this.formGroup.get('items') as FormArray;
  }

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      itemCount: [0],
      items: this.formBuilder.array([]),
    });
    this.formGroup.get('itemCount').valueChanges.subscribe((result) => {
      for (let j = this.itemsArray.length; j < result; j++) {
        this.itemsArray.push(this.addItems());
        console.log(this.itemsArray);
      }
    });
  }

  addItems(): FormGroup {
    return new FormGroup({
      itemValue: new FormControl(0, { validators: [Validators.required] }),
    });
  }

check out the example code

Angular Iterate Array Forms

Answer №1

Similar questions

What is the best way to obtain a signed cookie in aws-sdk-js-v3?

Utilizing Angular 6 for mapping objects in reactive forms

Creating dynamic lists in Angular with ngFor: A step-by-step guide

Having issues with importing momentjs by reference in TypeScript with amd configuration

Sending file URL to Angular component

How can you connect one data field to another within Angular?

CORS policy has blocked the Node.JS OvernightJS Express CORS XMLHttpRequest request

Fetching HTML files directly after building Angular (Tips for Developing Chrome Extensions)

How to Retrieve a File Using Angular 2

Redirecting with response headers in Next.js

Is TypeScript failing to enforce generic constraints?

Master the art of properly switching on reducer-style payloads in Typescript

Why do the RouteConfig and classes necessitate the inclusion of a service and router in their constructors?

Utilizing dynamic arguments in TypeScript to recycle types

Add TypeScript typings for npm utility manually by incorporating type definitions

Creating a cucumber feature file from an Excel sheet or any other type of file: A step-by

Tips for showcasing the contents of a file on a website

routerLinkActive maintains its active state even after another link has been clicked

Dynamically assign values to object properties of varying data types using indexing

Angular indicates that there is a problem with the property 'x' as it is not found in the type 'y[]'