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 >
                                <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"  style="width:700px">
                                </td>
                        </tr>

Here is my example

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

CodePudding user response：

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