如何将数据从反应式表单推送到 Firestore？答案

【问题标题】：How do I push data from a reactive form to firestore?如何将数据从反应式表单推送到 Firestore？
【发布时间】：2018-06-13 20:42:57
【问题描述】：

如何将数据从响应式表单推送到 Firestore？我现在创建了响应式表单，我只需要将信息从表单提交推送到集合和文档中。 Angular 5 是如何实现的？我已经编写了响应式表单，最后一部分是将数据推送到 firebase。

这是当前代码：从'@angular/core'导入{组件，OnInit，OnDestroy}；从 'angularfire2/firestore' 导入 { AngularFirestore, AngularFirestoreCollection }；从 'angularfire2/database' 导入 { AngularFireDatabase }；从'angularfire2/auth'导入{AngularFireAuth}；从 'rxjs/Observable' 导入 { 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);

        }
        }

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

这就是我的处理方式： 我假设你已经完成了使用 angularfire2 的所有设置

创建一个Service(items.service.ts)并建立连接和请求：（使用接口定义Item或创建模型文件，我更喜欢模型文件）

itemsCollection: AngularFirestoreCollection<Item>;
items: Observable<Item>;
collectionPath: string = "YOUR_PATH";

constructor(private afs: AngularFirestore) {
    this.itemsCollection = this.afs.collection(this.collectionPath);
}

addItem(item: Item){
    this.itemsCollection.add(item);
}

使用您的 items.component.ts 文件生成表单并推送数据：

item: Item;
itemForm: FormGroup;

constructor(private itemsService: ItemsService) { }

ngOnInit(){
    this.initForm()
}

private initForm(){
    this.itemForm = new FormGroup({
        'name' : new FormControl('', Validators.required),
        'title': new FormControl('', Validators.required)
        ......
    });
}

onSubmit(){
   this.itemService.addItem(this.itemForm.value);
}

在您的 html 文件中：
```
<form [formGroup]="itemForm"
      (ngSubmit)="onSubmit()">
```
并在您的输入中分配 formControlName 并添加一个带有 type="submit" 的提交按钮

我希望它有所帮助。这是我第一次使用它，所以我很抱歉现在以更好的方式格式化答案。

【讨论】：