下面是一个示例,演示如何使用Angular和Firestore将表格数据保存到新的集合/文档。
首先,确保你已经安装了Angular和Firebase模块,并在应用程序中进行了正确的配置。
import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class YourComponent {
form: FormGroup;
constructor(private firestore: AngularFirestore, private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
name: ['', Validators.required],
age: ['', Validators.required]
});
}
onSubmit() {
if (this.form.valid) {
const formData = this.form.value;
this.firestore.collection('yourCollection').add(formData)
.then(() => {
console.log('Data saved successfully!');
this.form.reset();
})
.catch((error) => {
console.error('Error saving data: ', error);
});
}
}
}
在上述示例中,我们使用Angular的Reactive Forms创建了一个简单的表单,其中包含name和age字段。当提交表单时,我们使用AngularFirestore服务将表单数据添加到Firestore的yourCollection集合中。
请注意,在使用此示例之前,你需要将Firestore集合的名称更改为你自己的集合。确保你已经正确地设置了Firebase配置和权限。
希望这个示例能帮助到你!
上一篇:Angular Firestore在Android设备上不显示 *ngFor
下一篇:Angular FireStore:在集合上应用snapshotChanges()会获取集合中的所有文档,快速消耗所有允许的读取操作。