How to create nested form with formBuilder properly in angular2? (method using Model Driven Form)
<p>what i trying to achieve is create a nested JSON data from HTML form, which is i using Model Driven Form or Reactive Form, i already create JSON data just like this :</p>

<pre><code>{
  "nomor_transaksi": "asdf",
  "tgl_trans": "asdf",
  "kd_slsman": "asdf",
  "kd_plg": "asdf",
  "nm_plg": "asdf",
  "kd_wil": "asdf",
  "nm_wil": "asdf",
  "flagCetak": "asdf",
  "is_Pajak": "asdf",
  "keterangan": "asdf",
  "username": "asdf",
  "cetakKe": "asdf",
  "kd_lokasi": "asdf",
  "returDetails": ""
}
</code></pre>

<p>that is my JSON data without array JSON, what i want to create JSON data is like this</p>

<pre><code>{
  "nomor_transaksi": "asdf",
  "tgl_trans": "asdf",
  "kd_slsman": "asdf",
  "kd_plg": "asdf",
  "nm_plg": "asdf",
  "kd_wil": "asdf",
  "nm_wil": "asdf",
  "flagCetak": "asdf",
  "is_Pajak": "asdf",
  "keterangan": "asdf",
  "username": "asdf",
  "cetakKe": "asdf",
  "kd_lokasi": "asdf",
  "returDetails":  [
    {
      "kd_brg": "xxxx",
      "qty": "1",
      "pengaduan": "asdf",
      "kd_lokasi": "asdf"
    }
  ]
}
</code></pre>

<p>How do i do that properly? i use formArrayName and i create formGroupName in div inside the form, but it's not working, it give me error like this </p>

<blockquote>
  <p>"ORIGINAL EXCEPTION: TypeError: self.context.returDetails is
  undefined"</p>
</blockquote>

<p>Below is my app.component.html code :</p>

<pre><code>&lt;h1&gt;
  {{title}}
&lt;/h1&gt;

Create a new Retur: 
&lt;form [formGroup]="datareturForm" (ngSubmit)="submitForm()"&gt;

      &lt;div class="form-group"&gt;
        &lt;label for="nomor_transaksi"&gt;Nomor Transaksi&lt;/label&gt;
        &lt;input type="text" placeholder="nomor transaksi" formControlName="nomor_transaksi"/&gt;
        &lt;p *ngIf="datareturForm.controls.nomor_transaksi.errors"&gt;Pelan2 bro, max 10 char ya&lt;/p&gt;
      &lt;/div&gt;&lt;br/&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="tgl_trans"&gt;Tanggal&lt;/label&gt;
        &lt;input type="text" placeholder="tgl_trans" formControlName="tgl_trans"/&gt;
        &lt;p *ngIf="datareturForm.controls.tgl_trans.errors"&gt;Pelan2 bro, max 10 char ya&lt;/p&gt;
      &lt;/div&gt;&lt;br/&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="kd_slsman"&gt;Kode Salesman&lt;/label&gt;
        &lt;input type="text" placeholder="Kode Salesman" formControlName="kd_slsman"/&gt;
        &lt;p *ngIf="datareturForm.controls.kd_slsman.errors"&gt;Pelan2 bro, max 10 char ya&lt;/p&gt;
      &lt;/div&gt;&lt;br/&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="kd_plg"&gt;Kode Pelanggan&lt;/label&gt;
        &lt;input type="text" placeholder="Kode Plg" formControlName="kd_plg"/&gt;
        &lt;p *ngIf="datareturForm.controls.kd_plg.errors"&gt;Pelan2 bro, max 10 char ya&lt;/p&gt;
      &lt;/div&gt;&lt;br/&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="nm_plg"&gt;Nama Pelanggan&lt;/label&gt;
        &lt;input type="text" placeholder="Nm Plg" formControlName="nm_plg"/&gt;
        &lt;p *ngIf="datareturForm.controls.nm_plg.errors"&gt;Pelan2 bro, max 10 char ya&lt;/p&gt;
      &lt;/div&gt;&lt;br/&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="kd_wil"&gt;Kode Wil&lt;/label&gt;
        &lt;input type="text" placeholder="Kode Wil" formControlName="kd_wil"/&gt;
        &lt;p *ngIf="datareturForm.controls.kd_wil.errors"&gt;Pelan2 bro, max 10 char ya&lt;/p&gt;
      &lt;/div&gt;&lt;br/&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="nm_wil"&gt;Nama Wil&lt;/label&gt;
        &lt;input type="text" placeholder="Nama Wil" formControlName="nm_wil"/&gt;
        &lt;p *ngIf="datareturForm.controls.nm_wil.errors"&gt;Pelan2 bro, max 10 char ya&lt;/p&gt;
      &lt;/div&gt;&lt;br/&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="flagCetak"&gt;Flag Cetak&lt;/label&gt;
        &lt;input type="text" placeholder="Flag Cetak" formControlName="flagCetak"/&gt;
        &lt;p *ngIf="datareturForm.controls.flagCetak.errors"&gt;Pelan2 bro, max 10 char ya&lt;/p&gt;
      &lt;/div&gt;&lt;br/&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="keterangan"&gt;Keterangan&lt;/label&gt;
        &lt;input type="text" placeholder="Keterangan" formControlName="keterangan"/&gt;
        &lt;p *ngIf="datareturForm.controls.keterangan.errors"&gt;Pelan2 bro, max 10 char ya&lt;/p&gt;
      &lt;/div&gt;&lt;br/&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="username"&gt;username&lt;/label&gt;
        &lt;input type="text" placeholder="username" formControlName="username"/&gt;
        &lt;p *ngIf="datareturForm.controls.username.errors"&gt;Pelan2 bro, max 10 char ya&lt;/p&gt;
      &lt;/div&gt;&lt;br/&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="cetakKe"&gt;Cetak Ke&lt;/label&gt;
        &lt;input type="text" placeholder="cetakKe" formControlName="cetakKe"/&gt;
        &lt;p *ngIf="datareturForm.controls.kd_lokasi.errors"&gt;Pelan2 bro, max 10 char ya&lt;/p&gt;
      &lt;/div&gt;&lt;br/&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="kd_lokasi"&gt;Kode Lokasi&lt;/label&gt;
        &lt;input type="text" placeholder="Kode Lokasi" formControlName="kd_lokasi"/&gt;
        &lt;p *ngIf="datareturForm.controls.kd_lokasi.errors"&gt;Pelan2 bro, max 10 char ya&lt;/p&gt;
      &lt;/div&gt;&lt;br/&gt;
      &lt;!-- sampai disini--&gt;
      &lt;div class="form-group"&gt;
        &lt;div formArrayName="returDetails"&gt;
          &lt;div *ngFor="let retur of returDetails.controls; let i=index" [formGroupName]="i"&gt;
            &lt;label for="kd_brg"&gt;Retur Detail&lt;/label&gt;
            &lt;input type="text" placeholder="Kode Barang" formControlName="kd_brg"/&gt;
            &lt;p *ngIf="datareturForm.controls.kd_brg.errors"&gt;Pelan2 bro, max 10 char ya&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;&lt;br/&gt;

      &lt;button type="submit"&gt;Save Contact&lt;/button&gt;
      &lt;br/&gt;
&lt;pre&gt;{{ datareturForm.value | json}}&lt;/pre&gt;
&lt;/form&gt;
</code></pre>

<p>below is my app.component.ts :</p>

<pre><code>import { Component, OnInit } from '@angular/core';
import { NavbarComponent } from './navbar';
import { RestfullService } from './restfull.service';
import { Observable } from 'rxjs/Rx';
import { HTTP_PROVIDERS, HTTP_BINDINGS, Http, Response, HttpModule} from '@angular/http';
import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [NavbarComponent],
  providers: [RestfullService, HTTP_PROVIDERS]
})

export class AppComponent {
  title = 'app works!';
  public data;
  public active;
  datareturForm: FormGroup;
  returDetails: FormArray;

  constructor(private _restfull: RestfullService, private formBuilder: FormBuilder) {
    //this.data = { nomor_transaksi: '12345678' }

   }

  ngOnInit(){
    this.getRest();

    this.datareturForm = this.formBuilder.group({
      //"nomor_transaksi": ['', Validators.maxLength(10)]
      nomor_transaksi: ['', Validators.maxLength(10)],
      tgl_trans: ['', Validators.maxLength(10)],
      kd_slsman: ['', Validators.maxLength(10)],
      kd_plg: ['', Validators.maxLength(10)],
      nm_plg: ['', Validators.maxLength(10)],
      kd_wil: ['', Validators.maxLength(10)],
      nm_wil: ['', Validators.maxLength(10)],
      flagCetak: ['', Validators.maxLength(10)],
      keterangan: ['', Validators.maxLength(10)],
      username: ['', Validators.maxLength(10)],
      cetakKe: ['', Validators.maxLength(10)],
      kd_lokasi: ['', Validators.maxLength(10)],
      returDetails: ['', Validators.maxLength(10)]
    })
  }

  getRest(){
    this._restfull.getDashboard().subscribe(
      data =&gt; {this.active = data[0]}
    );
  }

  submitForm(){
    console.log("exec " + this.datareturForm.value);
    console.log(this.datareturForm.controls['nomor_transaksi'].value);
    this._restfull.saveRetur(this.datareturForm.value).subscribe((dataResponse) =&gt; {
      console.log("exec " + this.datareturForm.value);
    });

  }

  bikinArray(): FormArray {
    this.returDetails = this.formBuilder.array([
      this.buildGroup()
    ]);
    return this.returDetails;
  }

  buildGroup(): FormGroup {
    return this.formBuilder.group({
      kd_brg:'',
      qty:'',
      pengaduan:'',
      kd_lokasi:''
    });
  }

  add() {
    this.returDetails.push(this.buildGroup());
  }
}
</code></pre>

<p>How to create the Array JSON with formArrayName properly?</p>