How to create dynamic form based on array length?

Question

I tried like this, it is generating the form based on attachment (array) length.

But the problem is while i am entering value in username/password field it is replicating in the next row.

    <form [formGroup]="form" >

        <button type="submit" (click)="submit()">Submit</button>

        <div *ngFor="let d of attachmentAr;"> 
          <div formArrayName="items" 
          *ngFor="let creds of form.controls.items?.value;
           let i = index">
            <ng-container [formGroupName]="i">
            <br>
              <input placeholder="name" formControlName="attachment" value="{{d.name}}">
              <input placeholder="Username" formControlName="username">
              <input placeholder="Password" formControlName="password">
            </ng-container>
          </div>
        </div>
         <br>
        <textarea type="input" formControlName="remark"></textarea>

    </form>

In component :

    form: FormGroup;

    attachmentAr = [{ name: "A" }, { name: "B" }, { name: "C" }]

    constructor(private fb: FormBuilder) {
      this.form = this.fb.group({
        items: this.fb.array([]),
        remark: [""]
      });
    }

    ngOnInit() {
      this.addCreds()
    }

    addCreds() {
      const formArray = this.form.controls.items as FormArray;
      formArray.push(this.fb.group({
        attachment: '',
        username: '',
        password: '',
      }));
    }

    submit() {
      console.log(' all rows : ', this.form.value);
    }

How to prevent for repeating the value in the next row. and finally collect all the row data on submit.

Stephen Wight · Accepted Answer · 2021-09-10 00:58:35Z

1

Change your addCreds() method to this:

addCreds() {
  const formArray = this.form.controls.items as FormArray;
  this.attachmentAr.forEach((item) => {
    formArray.push(this.fb.group({
        attachment: item.name,
        username: '',
        password: '',
      }));
  })
  
}

in html

<form [formGroup]="form">

    <button type="submit" (click)="submit()">Submit</button>


    <div formArrayName="items"
         *ngFor="let creds of form.get('items')?.controls;
       let i = index">
        <ng-container [formGroupName]="i">
            <br>
            <input placeholder="name" formControlName="attachment">
            <input placeholder="Username" formControlName="username">
            <input placeholder="Password" formControlName="password">
        </ng-container>
    </div>

    <br>
    <textarea type="input" formControlName="remark"></textarea>

</form>

edited Sep 10, 2021 at 0:58

Stephen Wight

1071 silver badge8 bronze badges

answered Jun 3, 2019 at 10:39

Džan Operta

4934 silver badges14 bronze badges

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

2 Comments

Džan Operta Over a year ago

they are differentiated by the formGroupName

uday214125 Over a year ago

@DžanOperta Thanks, it is working perfectly. it is acceptable answer.

John Velasquez · Accepted Answer · 2019-06-03 10:39:47Z

0

Don't use .value instead use .controls

<form [formGroup]="form">
    <button type="submit" (click)="submit()">Submit</button>

    <div *ngFor="let d of attachmentAr;"> 
      <div formArrayName="items" 
      *ngFor="let creds of form.get('items')?.controls; let i = index">
        <ng-container [formGroupName]="i">
        <br>
          <input placeholder="name" formControlName="attachment" value="{{d.name}}">
          <input placeholder="Username" formControlName="username">
          <input placeholder="Password" formControlName="password">
        </ng-container>
      </div>
     </div>
     <br>
    <textarea type="input" formControlName="remark"></textarea>

</form>

answered Jun 3, 2019 at 10:39

John Velasquez

3,4512 gold badges21 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to create dynamic form based on array length?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related