[AngularJS] How to implement multiple dynamic form array with template driven approach in angular2+ ?

[ACHARYA ANIL KUMAR]

I have implemented in reactive form approach. as follow 

https://raw.githubusercontent.com/acharyaks90/dynamicRowAddtionNG5/master/src/app/app.component.html
component .html 

<h1>
  {{title}}
</h1>
<form [formGroup]="multiForm">


<table class="table table-bordered table-inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
      <th> Action</th>
    </tr>
  </thead>
  <tbody formArrayName="userDetails">
    <tr   *ngFor="let single of multiForm.controls.userDetails.controls; let 
$index=index;" [formGroupName]="$index">
      <th scope="row">{{$index}}</th>
      <td><input type="text" class="form-control" 
formControlName="firstName"></td>
      <td><input type="text" class="form-control" 
formControlName="lastName"></td>
      <td><input type="text" class="form-control" 
formControlName="userName"></td>
      <td><button 
*ngIf="$index==(multiForm.controls.userDetails.controls.length-1)" 
(click)="onAdd();">Add +</button> <button (click)="onDelete($index);">Delete 
-</button></td>
    </tr>
   
  </tbody>
</table>

</form>

<button class="btn btn-primary" type="button" (click)="sendData()">Send/ 
Show</button>
<br>
<hr>
JSON Data
<br>
{{personList|json}}


component.ts 

https://raw.githubusercontent.com/acharyaks90/dynamicRowAddtionNG5/master/src/app/app.component.ts


import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray, Validators, FormBuilder } from 
'@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'app works!';
  multiForm: FormGroup;
    personList = [
    {
      'fName': "Mark",
      'lName': "Otto",
      'UserName': "@mdo"
    }, {
      'fName': "Mark",
      'lName': "Otto",
      'UserName': "@TwBootstrap"
    }, {
      'fName': "Jacob",
      'lName': "Thornton",
      'UserName': "@fat"
    }
  ]
  constructor(private formBuilder: FormBuilder) {
       this.multiForm = this.formBuilder.group({
      userDetails: this.formBuilder.array([])
    });
  }
  ngOnInit() {
        this.multiForm = this.formBuilder.group({
      userDetails: this.formBuilder.array(
        this.personList.map(x => this.formBuilder.group({
          firstName: [x.fName, [Validators.required, Validators.minLength(2)]],
          lastName: [x.lName, [Validators.required, Validators.minLength(2)]],
          userName: [x.UserName, [Validators.required, Validators.minLength(2)]]
        }))
      )
    })
  }
  onAdd(){
    console.log('11');
    // this.personList.push({
    //   fName: "Anil",
    //   lName: "kk",
    //   UserName: "@anks"
    // })
    const steps = <FormArray>this.multiForm.controls['userDetails'];
    steps.push(this.formBuilder.group({
      firstName: ['muuu', [Validators.required, Validators.minLength(2)]],
      lastName: ['aa', [Validators.required, Validators.minLength(2)]],
      userName: ['test', [Validators.required, Validators.minLength(2)]]
    }))
  }
  onDelete(index){
    console.log(this.multiForm);
    const steps = <FormArray>this.multiForm.controls['userDetails'];
        steps.removeAt(index);
  }
  sendData(){
    console.log(this.multiForm.value);
    this.personList = this.multiForm.value.userDetails;
  }
}


So now something similar. 


-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.