2017-03-03 82 views
3

嗨,大家好我是否在這裏做錯了什麼?: patchValue的事情工作正常。但FormGroup不會更新視圖的輸入值..Angular2 FormGroup View未更新訂閱

我已經嘗試過通過使用 私人裁判手動觸發它:另外採用.RUN()方法內 私人_ngZone ChangeDetectorRef

:NgZone

不起作用

這是我的代碼:

HTML:

 <form [formGroup]="addressForm"> 
     <div class="row"> 
      <!--zip--> 
      <div class="form-group col-md-2"> 
       <label>Zipcode</label> 
       <input type="text" class="form-control" formControlName="ZipCode"> 
       <small [hidden]="addressForm.controls.zipcode.valid" class="text-danger"> 
     zip is invalid! 
       </small> 
      </div> 

      <!--city--> 
      <div class="form-group col-md-3"> 
       <label>City</label> 
       <input type="text" class="form-control" formControlName="City"> 
      </div> 

     </div> 
     <div class="row"> 

      <!--state--> 
      <div class="form-group col-md-3"> 
       <label>State</label> 
       <input type="text" class="form-control" formControlName="State"> 
      </div> 

     </div> 
     <div class="row"> 

      <!--street--> 
      <div class="form-group col-md-3"> 
       <label>Street</label> 
       <input type="text" class="form-control" formControlName="Street"> 
      </div> 

      <!--streetNumber--> 
      <div class="form-group col-md-2"> 
       <label>Number</label> 
       <input type="text" class="form-control" formControlName="StreetNumber"> 
      </div> 
     </div> 

地址.Component

import { Observable } from 'rxjs/Observable'; 
import { AddressService } from './../service/address.service'; 
import { Address } from './../../../models/adresse.model'; 
import { NgZone, Component, Input, OnInit, ChangeDetectionStrategy,ChangeDetectorRef } from '@angular/core'; 
import { FormGroup, Form, FormBuilder, Validators, FormControl } from  
'@angular/forms'; 
import { Router, ActivatedRoute, Params } from '@angular/router'; 


@Component({ 
moduleId: module.id, 
selector: 'address-detail', 
templateUrl: 'address-detail.component.html', 
changeDetection: ChangeDetectionStrategy.Default 
}) 
export class AddressDetailComponent implements OnInit { 

@Input('group') 
public addressForm: FormGroup; 

constructor(private service: AddressService, private route: ActivatedRoute, private _fb: FormBuilder, private ref: ChangeDetectorRef, private _ngZone: NgZone) { 
} 

ngOnInit() { 

    this.addressForm = this._fb.group({ 
     ZipCode: ['', Validators.required], 
     City: [''], 
     State: [''], 
     Street: [''], 
     StreetNumber: ['', Validators.required] 
    }); 

    let id = this.route.snapshot.params['id'] + ""; 
    this.service.getAddressBy(id).subscribe((result) => { 

     this.addressForm.patchValue(result.Data); 
    }); 
} 

}

服務:

public getAddressBy(Id: string): 
Observable<TransferContainerModel<Address>> { 
    let url = AddressService.BASE_URL + 'GetAddressBy/'+Id; 

    return this.http.get(url) 
        .map((res:Response) => res.json()) 
        .catch((error:any) => 
Observable.throw(error.json().error || 'Server error')); 
} 

結果數據是細而預期認購ENV外面工作。 任何提示?

THX

回答

2

這好像你有地址模式,使嘗試是這樣的:

model: Address = new Address() //I suppose that you have a constructor for Address 

this.addressForm = this._fb.group({ 
     ZipCode: [this.model.zipCode, Validators.required], 
     City: [this.model.city], 
     State: [this.model.state], 
     Street: [this.model.street], 
     StreetNumber: [this.model.streetNumber, Validators.required] 
    }); 

現在patchValue應該作品:

this.service.getAddressBy(id).subscribe((result) => { 
     this.model = result.data 
     this.addressForm.patchValue(this.model); 
    }); 
+0

偉大的建議,搜索小時爲什麼在我發送模型細節並且細節包含在模型中後,控件不會更新。謝謝您的幫助。 – CodingRiot