Angular 2 POST JSON bestimmte Daten aus Form

Question

Ich habe JSON-Modell auf backand:

{ 
    "addresses": [ 
    { 
     "maxTravelTime": 0, 
     "travelTypeId": 0 
    } 
    ], 
    "categoryId": 0, 
    "maxPrice": 0, 
    "preferences": [ 
    { 
     "categoryId": 0, 
     "travelTypeId": 0, 
     "travelTime": 0 
    } 
    ] 
} 

und ich habe meine 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> 

Konsolenprotokoll Formulardaten sehen wie folgt aus:

addresses: Array [ {…} ] 
preferences: Array [ {…}, {…} ] 
category: Object { id: 3, cat: "Office" } 
price: "100" 
rooms: "All" 
type: Object { id: 2, typ: "Rent" } 

Wie erhalten Sie spezifische Steuerwerte von diesem myForm.value und fügen Sie es JSON nach JSON-Modell hinzu?

Answer 1

myForm.value ist ein Objekt, so dass Sie es Eigenschaften wie jedes andere Objekt zugreifen können, so etwas wie myForm.value.addresses, wenn Sie also nur bestimmten Wert brauchen es nur nennen