Iterate Formarray Angular

Question

I'm trying to Iterate my row depending on what the user input. for ex, the user input 2 value and will return the same value of rows. and how to insert it inside in 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 my example

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

cfprabhu · Accepted Answer · 2022-08-15 06:35:30Z

1

Try like this

  fg: FormGroup;

  get inputsArray(): FormArray {
    return this.fg.get('inputs') as FormArray;
  }

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.fg = this.fb.group({
      inputCount: [0],
      inputs: this.fb.array([]),
    });
    this.fg.get('inputCount').valueChanges.subscribe((res) => {
      for (let i = this.inputsArray.length; i < res; i++) {
        this.inputsArray.push(this.addInputsItem());
        console.log(this.inputsArray);
      }
    });
  }

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

example code

edited Aug 15, 2022 at 6:35

answered Aug 15, 2022 at 5:27

cfprabhu

5,3722 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Yan Over a year ago

childForm where did you get this one?

Yan Over a year ago

got to many error ERROR Error: Cannot find control with path: '0 -> 0' ERROR Error: Cannot find control with path: '0 -> 0 -> inputVal'

cfprabhu Over a year ago

please check the example link. I updated. stackblitz.com/edit/…

Yan Over a year ago

tried you latest update got error property controls does not exist on type AbstracControl

Yan Over a year ago

*ngFor="let addressGroup of form.get('inputs')['controls']; let i = index" [formGroup]="addressGroup"

Collectives™ on Stack Overflow

Iterate Formarray Angular

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related