如何提取資料并將其傳遞給表單？
user$!: Observable<UserI>
ngOnInit(): void {
this.user$ = this.userService.getPerson();
this.initializeForm();
}
initializeForm(): void {
this.form = this.fb.group({
fullName: new FormControl(?, Validators.required),
});
}
uj5u.com熱心網友回復：
您有多種選擇：
您可以在加載資料時初始化表單，也可以使用空/默認值初始化表單，并在加載資料時設定更新值。
方法一：
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),
});
}
方法二：
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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/387496.html
標籤：有角的