How do I push data from a reactive form to firestore?

Famous Source

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 & 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.

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';

    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);

        }
        }
angularangular-reactive-forms

Answers

answered 7 months ago Alejandro Gomez Rivera #1

This is how I'd approach it: I'm assuming you've done all the setup to use angularfire2

  1. Create a Service(items.service.ts) and establish connections and requests: (define Item either using interface or create a model file, I prefer the model file)

    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);
    }
    
  2. Use your items.component.ts file to generate the form and push the data:

    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);
    }
    
  3. In your html file:

    <form [formGroup]="itemForm"
          (ngSubmit)="onSubmit()">
    

    and in your inputs assign the formControlName and add a submit button with type="submit"

I hope it helps. This is the first time I use this, so I apologize for now formatting the answer in a nicer way.

comments powered by Disqus