在 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>
最佳答案
我不确定这是否有帮助,但我遇到了类似的问题,我的表单第一次正常加载,但当我在应用程序中导航时,事情开始中断,我必须将表单初始化代码从 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);
}
}
关于angular - 从可观察到的填充表单 - Angular2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40321449/