Adding new row in Form Array with Reactive Form Angular 4/5/6/7

<form [formGroup]="carForm" (ngSubmit)="doSubmit()">
  <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"><br>

        Model:
        <input type="text" formControlName="model"><br>

        Year:
        <input type="text" formControlName="year"><br>

        Make:
        <input type="text" formControlName="make"><br>

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

        Plate Number
        <input type="text" formControlName="plateNumber">
        <hr>
    </div>
  </div>
</form>

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

<pre>
    {{carForm.value | json}}
</pre>

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

@Component({
  selector: 'my-app',
  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: []
    });
  }

  doSubmit() {
    if (this.carForm.valid) {
      console.log(this._v);
    }
  }

  _v() {
    return this.carForm.value;
  }
}