Retrieve data from *ngForm and push to firebase

Question

I have signup form for new users. I want to push the new user details to firebase database.Can anyone please help me with it.

        <div class="column" style="padding: 7.5%" >
            <form >
        <label> Full Name </label>
        <input type="text" ng-maxlength="10" hint="Full Name"   class="form-control">
        <label> Phone Number </label>
        <input type="text" hint="phone" id="phone" maxlength="10" minlength="10"  class="form-control">
        
        <label> Aadhar Number </label>
        <input type="text" hint="aadhar" id="aadhar" maxlength="16"  minlength="16" class="form-control">
        <br><br>
        <button id="signup" class="btn btn-primary" routerLink="../../home/dashboard">Signup</button>
    </form>
    </div>

Adrita Sharma · Accepted Answer · 2019-11-11 07:13:09Z

1

You can create a user service like this:

service.ts

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import * as firebase from 'firebase';
import { IUser } from './IUser';

@Injectable({
  providedIn: 'root'
})
export class UserService {


  constructor(private db: AngularFirestore) { }

  createUser(user: IUser) {
    return this.db.collection('users').add(user);
  }

  getAllUsers(): Observable<any[]> {
    return this.db.collection('users').snapshotChanges();
  }

  getUserById(id) {
    return this.db.doc('users/' + id).get();
  }


  deleteUser(id) {
    return this.db.collection("users").doc(id).delete();
  }

  updateUser(id, user: IUser) {
    return this.db.collection("users").doc(id).set(user);
  }

}

and call createUser() from your component onSubmit:

component.ts

onSubmit(): void {
  this.service.createUser(this.userForm.value).then(
    res => {
    }
  )
}

component.html

<form class="form-horizontal" [formGroup]="userForm" (ngSubmit)="onSubmit()">
   ...
</form>

edited Nov 11, 2019 at 7:13

answered Nov 11, 2019 at 7:08

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Akhilesh Pothuri Over a year ago

in component.ts onSubmit(): void { this.service.createUser(this.userForm.value).then( res => { } ) } For the above snippet..I have declared userForm: any; service: any; But I am getting an error while using "res" error"- res' is declared but its value is never read.ts(6133) Parameter 'res' implicitly has an 'any' type.

Adrita Sharma Over a year ago

You can just use it like var res - res

Akhilesh Pothuri Over a year ago

That didn't work :/ ..I tried declaring it as var res=res;

Akhilesh Pothuri Over a year ago

onSubmit(): void { this.service.createUser(this.userForm.value).then( ( _res: any) => { } ) } I tried this....but the project wouldn't load

Adrita Sharma Over a year ago

Can you create a stackbiltz of your project

|

Akhilesh Pothuri · Accepted Answer · 2019-11-12 07:53:52Z

0

The following method helped me rectify the issue :

user.service.ts

 createUser(data: any) {
    this.users.push(data);
  }

This is the login.ts file:

instituteLogins(instaForm: NgForm){
    console.log("Entered new patient");
    
    console.log(instaForm.value);
    this.addUser(instaForm.value['phoneno'],instaForm.value["patient"],instaForm.value['aadhar']);
    
  }
  
  
  addUser(uid: string, name: string, mobile: string){
    var user = new User();
    user.uid = uid;
    user.name = name;
    user.mobile = mobile;
    this.userService.createUser(user);
  }

answered Nov 12, 2019 at 7:53

Akhilesh Pothuri

2252 gold badges7 silver badges20 bronze badges

Collectives™ on Stack Overflow

Retrieve data from *ngForm and push to firebase

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related