After numerous attempts to resolve the issue on my own, I am reaching out to an Angular developer for assistance. My goal is to display a JSON object in the UI:
Here is the JSON Object :
items={"departure":"New York","arrival":"California","stations":[{"station":"toto"}]}
On the user interface, I have a submit button that may not be visible but can execute this function:
save(){
console.log(Json.stringify(this.myForm.value))
}
The generated JSON Object is as follows:
{"tabls":[{"price":20}]}
Currently, only the first price is displayed. However, I would like all prices generated in the UI to be shown, resulting in the following JSON:
{"tabls":[{"price":20},{"price":10}]}
How can I make this happen?
Below is the HTML code snippet provided:
<div formArrayName="tabls">
<div *ngFor="let myGroup of myForm.controls.tabls.controls; let i=index">
<div [formGroupName]="i">
<div class="row">
<div class="col-sm-4" >
<div >
<div class="inner-addonx left-addon header-search" style="float:left;margin-right: 4px;">
<i class="glyphicon markerx" style="border: 5px solid #FED141"></i>
</div>
<span >{{items.departure}}</span>
</div>
</div>
<div class="col-sm-1" ><img style=" width: 32px; height: 22px;" src="../assets/img/arrow.svg" ></div>
<div class="col-sm-4" >
<span *ngIf="items.stations.length > 0">
{{items.stations[0].station}}
</span>
<span *ngIf="items.stations.length === 0">
{{items.arrival}}
</span>
</div>
<div class="col-sm-3" >
<div class="input-group " >
<input type="number" formControlName="price" value="1000" min="0" step="1" [attr.id]="'textbox'" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control currency" id="c2" />
<span class="input-group-addon">Dhs</span>
</div>
</div>
</div>
<hr/>
<div class="row">
<div *ngIf="items?.arrival && items?.departure">
<div class="col-sm-4">
<div style="">
<div class="inner-addonx left-addon header-search" style="float:left;margin-right: 4px;">
<i class="glyphicon markerx" style="border: 5px solid #63a599"></i>
</div>
<span>{{items.departure}}</span>
</div>
</div>
<div class="col-sm-1" >
<img style=" width: 32px; height: 22px;" src="../assets/img/arrow.svg" >
</div>
<div class="col-sm-4" >
<div style="">
<div class="inner-addonx left-addon header-search" style="float:left;margin-right: 4px;">
<i class="glyphicon markerx" style="border: 5px solid #F53F5B"></i>
</div>
<span>{{items.arrival}}</span>
</div>
</div>
<div class="col-sm-3" >
<div class="input-group ">
<input type="number" formControlName="price" value="1000" min="0" step="1" [attr.id]="'finalprice'" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control currency" id="c2" />
<span class="input-group-addon">Dhs</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Typescript code segment:
ngOnInit() {
this.myForm = this._fb.group({
tabls: this._fb.array([
this.initArray2()
]),
})
}
initArray2() {
return this._fb.group({
price: [''],
});
}