Btukfyl

Actually on add click I need to add row its getting added but I am not able to get the ngmodel object Or Is there any other best way to implement using reactive forms so finally requirement is to get a row on add click and get the form value best way of implementation or please modify the above code

Stackblitz Link

Check live demo here.

http://keepnote.cc/code/form-group-with-formarray-adding-dyamic-row-angular-5-6

Please check this.

We have to use FormBuilder and FormBuilder.array for dynamic rows.

html

<form [formGroup]="carForm" (ngSubmit)="saveIntergration()">

    <div formArrayName="details" class="form-group" *ngFor="let field of carForm.get('details').controls; let ind = index;">

        <div [formGroupName]="ind">

            Type:

            <input type="text" formControlName="type">



            model:

            <input type="text" formControlName="model">



            year:

            <input type="text" formControlName="year">



            make:

            <input type="text" formControlName="make">



            color

            <input type="text" formControlName="color">



            plateNumber

            <input type="text" formControlName="plateNumber">



            <hr>

        </div>

    </div>

</form>



<button (click)="addRow()">Add New</button>



<pre>

    {{carForm.value | json}}

</pre>

ts

import { Component, ViewChild } from '@angular/core';

import { FormBuilder, FormGroup, FormControl, Validators, FormArray } from '@angular/forms';



@Component({

selector: 'app-root',

templateUrl: './app.component.html'



})

export class AppComponent {

    public carForm: FormGroup;

    constructor(private fb: FormBuilder) {



        const items = ;

        items.push(this.fb.group({

            type: ,

            model: ,

            year: ,

            make: ,

            color: ,

            plateNumber: 

        }));



        this.carForm = this.fb.group({

            details: this.fb.array( items )

        });

    }



    addRow() {

        const details = this.carForm.get('details') as FormArray;

        details.push(this.createItem());

    }



    createItem(): FormGroup {

        return this.fb.group({

            type: ,

            model: ,

            year: ,

            make: ,

            color: ,

            plateNumber: 

        });

    }

}

Reactive Forms in Angular: Dynamically Creating Form Fields With FormArray.

Please alter your code as per given sample.

HTML:

<form [formGroup]="orderForm" (submit)="onSubmit()">

  <div class="row">

    <button type="button" (click)="addItem()">add</button></div>

  <div *ngFor="let item of data" class="row">

    <div class="col">{{item.Type}}</div>

    <div class="col">{{item.Model}}</div>

    <div class="col">{{item.Year}}</div>

    <div class="col">{{item.Make}}</div>

    <div class="col">{{item.Color}}</div>

    <div class="col">{{item.PlateNumber}}</div>

    <div class="col">{{item.StateRegistered}}</div>

  </div>

  <div formArrayName="items" *ngFor="let item of orderForm.get('items').controls; let i = index;" class="row">

    <div [formGroupName]="i">

      <input formControlName="Type">

      <input formControlName="Model">

      <input formControlName="Year">

      <input formControlName="Make">

      <input formControlName="Color">

      <input formControlName="PlateNumber">

      <input formControlName="StateRegistered">

    </div>

  </div>

  <div class="row">

    <button type="submit">Submit</button>

  </div>

</form>

TS:

import { Component, OnInit } from '@angular/core';

import { FormGroup, FormArray, FormBuilder } from '@angular/forms';



@Component({

  selector: 'app-stack53513269',

  templateUrl: './stack53513269.component.html',

  styleUrls: ['./stack53513269.component.css']

})

export class Stack53513269Component implements OnInit {

  orderForm: FormGroup;

  items: FormArray;

  data: any = ;

  constructor(private formBuilder: FormBuilder) {

    this.data.push({ Type: 'SUV', Model: '500', Year: '2009', Make:'Mahinda',   Color:'Red',    PlateNumber:'RJ-15',    StateRegistered:'Rajsthan' });

  }



  ngOnInit() {

    this.orderForm = this.formBuilder.group({

      items: this.formBuilder.array([this.createItem()])

    });

  }



  createItem(): FormGroup {

    return this.formBuilder.group({

      Type:'',  Model:'',   Year:'',    Make:'',    Color:'',   PlateNumber:'', StateRegistered:''

    });

  }



  addItem(): void {

    this.items = this.orderForm.get('items') as FormArray;

    this.items.push(this.createItem());

  }



  onSubmit() {

    this.items = this.orderForm.get('items') as FormArray;

    console.log(this.items.value);

  }

}