我想要实现的是从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,但它不起作用,它给我这样的错误
“ORIGINAL EXCEPTION:TypeError:self.context.returDetails is 未定义“
以下是我的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?
答案 0 :(得分:0)
我必须发表评论我不知道为什么会导致错误,我已经更改了名称控制,现在仍在工作,但这不是我在这个问题中的问题< / p>
这是我更新的详细信息:
<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/>
我忘记在onInit时启动returDetails:
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()
})
}