i want to use Angular reactive form in my project, to get a complex json object, i will explain my problem : I have this JSON object :
items={"departure":"New York","arrival":"California","stations":[{"station":"toto"},{"station":"titi"},{"station":"tata"}]}
i managed to get this User Interface with this code :
<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">
<div *ngIf="items?.departure">
<span>{{items.departure}}</span> -->
<span *ngIf="items.stations.length > 0">
{{items.stations[0].station}}
</span>
<span *ngIf="items.stations.length === 0">
{{items.arrival}}
</span>
<div class="input-group spinner">
<input type="text" formControlName="price" class="form-control">
<div class="input-group-btn-vertical">
<button (click)="spinnerPriceUp()" class="btn btn-default"
type="button"><i class="fa fa-caret-up"></i></button>
<button (click)="spinnerPriceDown()" class="btn btn-default"
type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
<div *ngFor="let item of items.stations; let i=index, let last = last">
<div *ngIf="!last">
<span>{{item.station}}</span> --> <span *ngIf="items.stations[i+1]">
{{items.stations[i+1].station}}</span>
<div class="input-group spinner">
<input type="text" formControlName="price" class="form-control">
<div class="input-group-btn-vertical">
<button (click)="spinnerPriceUp()" class="btn btn-default"
type="button"><i class="fa fa-caret-up"></i></button>
<button (click)="spinnerPriceDown()" class="btn btn-default"
type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
</form>
so, you dont care about this code becausause i works as expected, my problem is, when i click on the submit botton i want to generate like this JSON object :
{object:[{"price":"the value"},{"price":"the value"},{,"price":"the value"}, {"price":"the value"},{"price":"the value"}]}
The value mentioned in the JSON object is the value in the price textbox field in UI.(image above)
I tried thid code but it doesnt work : Component.ts
ngOnInit() {
this.myForm = this._fb.group({
object: this._fb.array([
this.initArray2()
]),
})
}
initArray2() {
return this._fb.group({
price: ['00'],
});
}
HTML CODE :
<div formArrayName="object" >
<div *ngFor="let address of myForm.controls.object.controls; let i=index" [formGroupName]="i" >
//i put the code aboove
</div>
myform: FormGroup
(outside component export class)
import {FormBuilder, FormGroup} from '@angular/forms';
(inside component export class)
constructor(private _fb: FormBuider) {}
.ts
myForm: FormGroup;
constructor(private _fb: FormBuilder) {}
ngOnInit() {
this.myForm = this._fb.group({
object: this._fb.array([
this.initArray2()
]),
});
}
initArray2() {
return this._fb.group({
price: ['00'],
});
}
.html
<form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm)">
<div *ngIf="items?.departure">
<span>{{items.departure}}</span> -->
<span *ngIf="items.stations.length > 0">
{{items.stations[0].station}}
</span>
<span *ngIf="items.stations.length === 0">
{{items.arrival}}
</span>
<div class="input-group spinner">
<input type="text" formControlName="price" class="form-control">
<div class="input-group-btn-vertical">
<button (click)="spinnerPriceUp()" class="btn btn-default"
type="button"><i class="fa fa-caret-up"></i></button>
<button (click)="spinnerPriceDown()" class="btn btn-default"
type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
<div formArrayName="object" >
<div *ngFor="let item of myForm.get('object').controls; let i=index"
[formGroupName]="i">
<div class="input-group spinner">
<input type="text" formControlName="price" class="form-control">
<div class="input-group-btn-vertical"></div>
</div>
</div>
</div>
</form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.