要解决Angular中从Firebase中填充表单导致重复的问题,可以按照以下步骤进行操作:
formValue
。ngOnInit
生命周期钩子中,使用Firebase服务获取表单数据,并将其赋值给formValue
变量。formValue
变量来填充表单的初始值。下面是一个示例代码:
import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-my-form',
templateUrl: './my-form.component.html',
styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
form: FormGroup;
formValue: any;
constructor(private db: AngularFireDatabase, private fb: FormBuilder) { }
ngOnInit(): void {
this.form = this.fb.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
email: ['', [Validators.required, Validators.email]]
});
// 获取表单数据
this.db.object('form-data').valueChanges().subscribe(data => {
this.formValue = data;
// 将表单数据填充到表单中
this.form.patchValue(this.formValue);
});
}
submitForm() {
// 处理表单提交
// ...
}
}
在上述代码中,我们使用AngularFireDatabase
服务从Firebase中获取表单数据。form-data
是Firebase数据库中的路径,你可以根据自己的实际情况进行更改。
然后,我们使用form.patchValue()
方法将从Firebase获取的数据填充到表单中。这样,在页面加载时,表单将根据Firebase中的数据进行填充。
请注意,上述代码中的表单验证仅作为示例。你可以根据自己的需求进行更改和扩展。