CODEWITHSUNDEEP
angular
uday214125
uday214125

Reputation: 583

How to create dynamic form based on array length?

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.

enter image description here

    <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.

Upvotes: 1

Views: 1311

Answers (2)

Džan Operta
Džan Operta

Reputation: 493

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>

Upvotes: 1

John Velasquez
John Velasquez

Reputation: 3451

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>

Upvotes: 0

Related Questions