如何在angular2中使用formBuilder正确创建嵌套表单？ （使用模型驱动表单的方法）

Question

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 :

{
  "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": ""
}

that is my JSON data without array JSON, what i want to create JSON data is like this

{
  "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"
    }
  ]
}

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

"ORIGINAL EXCEPTION: TypeError: self.context.returDetails is undefined"

Below is my app.component.html code :

<h1>
  {{title}}
</h1>

Create a new Retur: 
<form [formGroup]="datareturForm" (ngSubmit)="submitForm()">

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

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

below is my app.component.ts :

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 => {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) => {
      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());
  }
}

How to create the Array JSON with formArrayName properly?

Answer 1

i have to comment i don't know why that's cause the error, i already change the name control, still now working, but that's not what my problem is in this question

here is my updated details :

  <div class="form-group">
    <div formArrayName="returDetails">
      <p>List Barang : </p>
      <div *ngFor="let retur of returDetails.controls; let i=index" [formGroupName]="i">
        <label for="kd_brg">Kode Barang</label>
        <input type="text" placeholder="Kode Barang" formControlName="kd_brg"/>
        <!--<p *ngIf="returDetails.controls.kd_brg.errors">Pelan2 bro, max 10 char ya</p>-->
      </div>
    </div>
  </div><br/>

and i forget to initiate returDetails when onInit :

  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)],
      is_Pajak: ['', Validators.maxLength(10)],
      keterangan: ['', Validators.maxLength(10)],
      username: ['', Validators.maxLength(10)],
      cetakKe: ['', Validators.maxLength(10)],
      kd_lokasi: ['', Validators.maxLength(10)],
      returDetails: this.bikinArray()
    })
  }