如何提取数据并将其传递到表单?
user$!: Observable<UserI>
ngOnInit(): void {
this.user$ = this.userService.getPerson();
this.initializeForm();
}
initializeForm(): void {
this.form = this.fb.group({
fullName: new FormControl(?, Validators.required),
});
}
最佳答案
您有多种选择:
您可以在加载数据时初始化表单,也可以使用空/默认值初始化表单并在加载数据时设置更新值。
方法一:
ngOnInit(): void {
this.userService.getPerson().pipe(
tap(user => this.initializeForm(user))
).subscribe();
}
initializeForm(user: UserI): void {
this.form = this.fb.group({
fullName: new FormControl(user.fullName, Validators.required),
});
}
方法2:
ngOnInit(): void {
this.initializeForm();
this.userService.getPerson().pipe(
tap(user => {
this.form.get('fullName').setValue(user.FullName);
})
).subscribe();
}
initializeForm(): void {
this.form = this.fb.group({
fullName: new FormControl('', Validators.required),
});
}
我个人更喜欢为我的控件创建字段:
readonly fullName = new FormControl('', Validators.required);
ngOnInit(): void {
this.initializeForm();
this.userService.getPerson().pipe(
tap(user => {
this.fullName.setValue(user.FullName);
})
).subscribe();
}
initializeForm(): void {
this.form = this.fb.group({
fullName: this.fullName,
});
}
然后我可以直接访问它们,包括在 html 中
<input [formControl]="fullName"/>
<span *ngIf="fullName.errors?.required">Fullname is required</span>
关于angular - 如何从 Observable 中提取数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70420001/