如何将数据从被动表单推送到firestore?我现在创建了反应形式,我只需要将信息从表单提交中推送到集合和文档中 . Angular 5如何实现这一目标?我写了反应形式,最后一部分是将数据推入firebase .
这是当前代码:从@ @ angular / core导入{Component,OnInit,OnDestroy};从'angularfire2 / firestore'导入{AngularFirestore,AngularFirestoreCollection};从'angularfire2 / database'导入;从'angularfire2 / auth'导入;从'rxjs / Observable'导入;
import { FirestoreService } from '../../../../providers/firestore.service';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/observable/combineLatest';
import * as firebase from 'firebase/app';
import { ActivatedRoute } from '@angular/router';
import { FormGroup, FormControl, Validators } from '@angular/forms';
export interface Item {
productName: '';
productTitle: '';
productPrice: '';
productDescription: '';
}
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {
productId: any;
prodId: string;
ref: AngularFirestoreCollection<Item>;
items: Observable<Item[]>;
// for the form
Item: FormGroup;
FormGroup = this.db.col$('items');
// end for the form
private routeSubscribed: any;
constructor(
private route: ActivatedRoute,
public db: FirestoreService,
private afs: AngularFirestore
) { }
ngOnInit() {
this.ref = this.afs.collection('items');
this.items = this.ref.valueChanges();
this.items = this.db.col$('items');
this.items = this.db.colWithIds$('items');
this.productId = this.db.doc$(`items/${this.prodId}`);
/// here is the form for products
const data: Item = new Item ({
productName: new FormControl('', {
validators: Validators.required
}),
productTitle: new FormControl('', {
validators: Validators.required
}),
productPrice: new FormControl('', {
validators: Validators.required
}),
productDescription: new FormControl('', {
validators: Validators.required
})
}, { updateOn: 'submit' } );
// end here is the form for products
this.afs.doc(`items/tops`).set(data);
this.db.set(`items/tops`, data);
}
}
1 回答
这就是我接近它的方式: I'm assuming you've done all the setup to use angularfire2
并在您的输入中分配formControlName并添加type =“submit”的提交按钮
我希望它有所帮助 . 这是我第一次使用它,所以我道歉现在以更好的方式格式化答案 .