title: How do I push data from a reactive form to firestore?
body: <p>How do I push data from a reactive form to firestore? I created the reactive form now I just need to push the info into the collections &amp; documents from the form submit. How is that accomplished with Angular 5? I have written the reactive form, the last part is pushing the data into firebase.</p>
  
  <p>This is the current code:
          import { Component, OnInit, OnDestroy } from '@angular/core';
          import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';
          import { AngularFireDatabase } from 'angularfire2/database';
          import { AngularFireAuth } from 'angularfire2/auth';
          import { Observable } from 'rxjs/Observable';</p>
  
  <pre><code>    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&lt;Item&gt;;
      items: Observable&lt;Item[]&gt;;
  
      // 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);
  
          }
          }
  </code></pre>