来自表单的Angular 2 POST JSON特定数据

时间:2017-11-27 13:17:05

标签: forms angular http post

我背面有JSON模型:

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

我有我的密码:

 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>

控制台日志表单数据如下所示:

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

如何从此myForm.value获取特定控件值并根据JSON模型将其添加到JSON?

0 个答案:

没有答案