Pushing Form Data Into Fire base

Pushing Form Data Into Fire base

1. Form Creation

2. Pushing Form Data into data base.

1. Form Creation in Angular

1. Create Form Component

Command : ng generate component templateForms --spec=false    

   The above command generate's following file's 

1. template-forms.component.html
2. template-forms.component.ts
3. template-forms.component.css

 Create one more file in the same folder as model file 

4. template-forms.model.ts

Now in the model file do the following 

    export class LoginForm {
        emailVal: string;
        passwordVal: string;
    }

Description

1. In this model we are using 2 form input's which we need to send as a request
2. In model we define name of model and type of model if we don't have default
   Values. 

In template-forms.component.ts do the following

      <form #loginForm="ngForm" (ngSubmit)="login(loginForm)">
      Email <br>
      <input type="email" [(ngModel)]="loginObj.emailVal" 
      name="Username" #email="ngModel" required
      pattern="[a-z0-9._]+@[a-z0-9.-]+\.[a-z]{2,3}$" 
      [ngModelOptions]="{updateOn: 'submit'}">

      <div *ngIf="email.invalid && (email.dirty || email.touched)">
        <div *ngIf="email.errors.required">
          Password is required
        </div>
        <div *ngIf="email.errors.pattern">
          Please enter valid email
        </div>
      </div>

      <br>Password <br>
      <input type="password" [(ngModel)]="loginObj.passwordVal" 
      name="password" #password="ngModel"
      required minlength="5">
      <div *ngIf="password.invalid && (password.dirty || password.touched)">
        <div *ngIf="password.errors.required">
          Password is required
        </div>
        <div *ngIf="password.errors.minlength">
          Password requires minimum 5 char
        </div>
      </div>
      <br><br>
      <button type="submit">Login</button>
      </form>

Description

1. A form can be defined as an angular form using #loginForm="ngForm".
2. ngSubmit is an angular form event which invokes the method when 
   user click's on submit button
3. ngModel is used for 2 way binding.
4. To define element as model in angular we can use #SOME_NAME="ngModel".
5. SOME_NAME can be used for form validations.
6. Every element inside the form can be validated and have the following 
   validation properties
   1. Dirty 
   2. Valid
   3. Invalid
   4. prestine
   5. Touched
   6. Untouched
7. By Default all the forms are validated when user is typing in the field
   but when we can change the validation or updation using ngModelOptions 
8. ngModelOptions is an input property which accepts an model 
   configuration object which contains 
  {updateOn: 'submit / blur', standalone: true/false, name: 'any string'}.
9. We can pass form data from view to container as a parameter with 
   #SOME_NAME.
10. Pattern, required , minlength, maxlength, can also be declared and 
    validated.

In template.component.ts do the following 

import { Component, OnInit } from '@angular/core';

import { LoginForm } from './template-forms.model';

@Component({
  selector: 'app-template-forms',
  templateUrl: './template-forms.component.html',
  styleUrls: ['./template-forms.component.css']
})
export class TemplateFormsComponent implements OnInit {

  loginObj: LoginForm;

  constructor() { }

  ngOnInit() {
    this.loginObj = new LoginForm();
  }

  login(formData) {
    console.log(formData.value);
  }
}

Description

1. We have created a model object with loginform model type 
2. When user submit the form we are calling a method login(formData).
3. Form data contains whole information of the form like 
   Controls , errors, dirty, pristine, touched, untouched (At both form level
   and individual control levels).
4. We can pass this form data to the service as a request if needed. 

2. Pushing Form Data into Fire base.

    import following services in component as follow's

import {AngularFireDatabase} from 'angularfire2/database';

   Create a reference for the AngularFireDatabase Service as follow's

constructor(private db: AngularFireDatabase) { }

   In login method of the component push the form data as follow's

login(formData) {
   const url = '/loginData';
   this.db.list(url).push(formData.value);
}

Description:

1. login is a method with formData as parameter which contain fo   rm related information
2. db is reference for database
3. url is a reference link for saving our login data
4. list is a method of database which takes URL as parameter 
5. push is a method of list which takes some information in the  JSON format and creates a  dynamic key in fire base
6. Now open your fire base and you can see the data stored insid  e the URL (i.e.. '/loginData'). 

Now at last our template-forms.component.ts will look like below

import { Component, OnInit } from '@angular/core';

import { LoginForm } from './template-forms.model';

import { AngularFireDatabase } from 'angularfire2/database';

@Component({
  selector: 'app-template-forms',
  templateUrl: './template-forms.component.html',
  styleUrls: ['./template-forms.component.css']
})
export class TemplateFormsComponent implements OnInit {

  loginObj: LoginForm;

  constructor(private db: AngularFireDatabase) { }

  ngOnInit() {
    this.loginObj = new LoginForm();
  }

  login(formData) {
    const url = '/loginData';
    this.db.list(url).push(formData.value);
  }
}