Angular 2 POST JSON specific data from form - forms

Question

I have JSON model on backand:
{
"addresses": [
{
"maxTravelTime": 0,
"travelTypeId": 0
}
],
"categoryId": 0,
"maxPrice": 0,
"preferences": [
{
"categoryId": 0,
"travelTypeId": 0,
"travelTime": 0
}
]
}
and I have my ts code:
initForm() {
this.myForm = this._fb.group({
type: '',
category: '',
price: '',
rooms: '',
preferences: this._fb.array([this.initLocationRows()]),
addresses: this._fb.array([this.initAddressRows()]),
});
}
onSubmit(){
console.log(this.myForm.value);
}
html -
<form [formGroup]="searchForm" (ngSubmit)="onSubmit()">
<div class="col-md-10 panel">
<div class="col-md-2">
<div class="form-group">
<label for="type">Type</label>
<select class="form-control" id="type" name="type" formControlName="type">
<option *ngFor="let t of types" [ngValue]="t">{{t.typ}}</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="category">Category</label>
<select class="form-control" id="category" formControlName="category">
<option *ngFor="let c of categories" [ngValue]="c">{{c.cat}}</option>
</select>
</div>
</div>
</div>
<div formArrayName="locationRows">
<div class="row" *ngFor="let itemrow of searchForm.controls.locationRows.controls; let i=index" [formGroupName]="i">
<div class="col-md-3">
<div class="form-group">
<label for="category">Nearby</label>
<select class="form-control" id="nearby" formControlName="nearby">
<option *ngFor="let p of preferences" [ngValue]="p">{{p.pref}}</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="maxtime">Max travel time</label>
<select class="form-control" id="maxtime" formControlName="maxtime">
<option *ngFor="let t of maxTime" [ngValue]="t">{{t.int}}</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="travel">Travel type</label>
<select class="form-control" id="travel" formControlName="travel">
<option *ngFor="let tt of travelType" [ngValue]="tt">{{tt.tr}}</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<button style="margin-top: 30px;" *ngIf="searchForm.controls.locationRows.controls.length > 1" (click)="removeLocationRow(i)" class="btn btn-danger btn-xs">-</button>
</div>
</div>
</div>
</div>
</form>
console log form data looks like:
addresses: Array [ {…} ]
preferences: Array [ {…}, {…} ]
category: Object { id: 3, cat: "Office" }
price: "100"
rooms: "All"
type: Object { id: 2, typ: "Rent" }
How to get specific controls value from this myForm.value and add it to JSON according to JSON model?

Answer 1

myForm.value is an Object so you can access it's properties like any other object, something like myForm.value.addresses , so if you need only specific value just call it