Observableからフォームを取り込む - Angular2

Question

ObservableからAngular 2のフォームを取り込む正しい方法は何ですか？

現時点では、私は半分の作業状況があります。初めてデータを入力したときにフォームにアクセスしたときに、フォームから戻ってページを再訪すると、データはなくなりました。

コンポーネント

export class ProfileEditComponent implements OnInit { 
    user: FirebaseObjectObservable<UserProfile>; 
    form: FormGroup; 
    error = false; 
    errorMessage = ''; 

    constructor(private authService: AuthService, private fb: FormBuilder) { } 

    ngOnInit() { 
    this.authService.getUserProfile().subscribe(data => { 
     this.user = <FirebaseObjectObservable<UserProfile>>data; 
     console.log('user', this.user) 

     this.user.subscribe((resp) => { 
     this.form.patchValue(
      { 
      company: resp.company 
      } 
     ) 
     }) 

    }); 

    this.form = this.fb.group({ 
     company: ['', Validators.required], 
    }); 
    } 

    onEdit() { 
    this.authService.editUserProfile(this.user, this.form.value); 
    } 
} 

テンプレート

<h2>Profile edit component</h2> 
    <a [routerLink]="['/profile']">cancel</a> 

    <form [formGroup]="form" (ngSubmit)="onEdit()"> 
     <div class="form-group"> 
      <label for="company">Company</label> 
      <input 
      formControlName="company" 
      type="company" 
      id="company" 
      #company 
      class="form-control" 
      > 
      <span *ngIf="!company.pristine && company.errors != null && company.errors['noCompany']">No Company name</span> 
     </div> 

     <button type="submit" [disabled]="!form.valid" class="btn btn-primary">Change profile</button> 
    </form> 

Answer 1

私はこれが役立つかどうかわからないが、私は自分のフォームが正常に最初の時間をロードしますが、私た同様の問題に直面しました私は、フォーム初期化コードをngOnInitからActivatedRoute paramsの変更のリスナーに移動しなければならなかった。この行に沿った何か

export class ProfileEditComponent implements OnInit { 
    user: FirebaseObjectObservable<UserProfile>; 
    form: FormGroup; 
    error = false; 
    errorMessage = ''; 

    constructor(private authService: AuthService, private fb: FormBuilder, private route:ActivatedRoute) { } 

    ngOnInit() { 
     this.route.params.subscribe(this.onParamsChange.bind(this)) 
    } 

    onParamsChange() { 
     this.authService.getUserProfile().subscribe(data => { 
      this.user = <FirebaseObjectObservable<UserProfile>>data; 
      console.log('user', this.user) 

      this.user.subscribe((resp) => { 
       this.form.patchValue(
        { 
         company: resp.company 
        } 
       ) 
      }) 

     }); 

     this.form = this.fb.group({ 
      company: ['', Validators.required], 
     }); 
    } 

    onEdit() { 
     this.authService.editUserProfile(this.user, this.form.value); 
    } 
}