Форма заполнения от наблюдаемого - Angular2

Question

Каков правильный способ заполнения формы из наблюдаемого в 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. Что-то по линиям этого

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); 
    } 
}