【发布时间】：2016-08-31 03:15:32
【问题描述】：
我试图实现的是从 HTML 表单创建嵌套的 JSON 数据，这是我使用模型驱动表单或反应式表单，我已经像这样创建了 JSON 数据：
{
"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": ""
}
那是我没有数组JSON的JSON数据，我要创建的JSON数据是这样的
{
"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"
}
]
}
我该如何正确地做到这一点？我使用 formArrayName 并在表单内的 div 中创建 formGroupName，但它不起作用，它给了我这样的错误
“原始异常：TypeError：self.context.returDetails 是 未定义”
下面是我的 app.component.html 代码：
<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>
下面是我的 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());
}
}
如何正确创建带有 formArrayName 的 Array JSON？
【问题讨论】：