Angular Form

There are two types of forms in the angular.
1) Template Driven Form
2) Model-Driven Form (Reactive Form)

1) Template Driven form

when you used template driven form then most of the work is done in the component html file like app.component.html or any custom component template file like users.component.html file.

How to use Template Driven form?

step-1:- Firstly include FormsModule in the module file.

Example:- in app.module.ts file

import { FormsModule, ReactiveFormsModule} from '@angular/forms';

step-2:- after that include in the imports property array which is in the @NgModule

@NgModule({
 imports: [FormsModule, ReactiveFormsModule]
 })

step-3:- Now, implement the logic in the app.component.ts file.
when the user fills the form and clicks on the submit button.

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

@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent implements OnInit {  
  constructor() { }  
  ngOnInit() {  
  }  

  loginSubmit(userlogin:NgForm){  
    console.log(userlogin);  
  }  
}

step-4:- Now create the form in the app.component.html file.

Suppose, you have to create a user login form.


<form #userlogin = "ngForm" (ngSubmit) = "loginSubmit(userlogin.value)" >
   <input type = "text" name = "email" placeholder = "Email" required  ngModel>
   <br/>
   <input type = "password" name = "password" placeholder ="Password" required ngModel>
   <br/>
   <input type = "submit" value = "submit">
</form>

Note:- When you fill the form value then click on the submit button then show the value in the console.

2) Model Driven form (Reactive Form)

when you used Model driven form then most of the work is done in the component class file like app.component.ts or any custom component template file like users.component.ts file.

How to use Model-Driven form (Reactive Form)

step-1:- Firstly include FormsModule in the module file.
Example:- in app.module.ts file

import { FormsModule, ReactiveFormsModule} from '@angular/forms';

step-2:- after that include in the imports property array which is in the @NgModule

@NgModule({
 imports: [FormsModule, ReactiveFormsModule]
 })

step-3:- Now, implement the logic in the app.component.ts file.
when the user fills the form and clicks on the submit button.

import { Component, OnInit } from '@angular/core';  
import { FormGroup,FormBuilder, Validators } from '@angular/forms';

@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  

export class AppComponent implements OnInit {  
  
  userlogin: FormGroup;
  user_submitted:boolean=false;
  constructor(private fb: FormBuilder,
    private router:Router,

    ) { }


 ngOnInit() {  

       this.userlogin = this.fb.group({
	       email: ['', [Validators.required]],
	       password: ['', [Validators.required]],
      });
    }


// convenience getter for easy access to form fields
get userdata() { return this.userlogin.controls; }


 loginSubmit(){  
     this.user_submitted = true;
    console.log(userlogin);  
    if (this.userlogin.invalid) {
     //  show validation
       return;
   }

  } 


  }  


step-4:- Now create the form in the app.component.html file.

Suppose, you have to create a user login form.


<form [formGroup]="userlogin"  (ngSubmit)="loginSubmit()">
   <input type = "text" formControlName= "email" placeholder = "Email"  [ngClass]="{ 'is-invalid': user_submitted && userdata.email.errors }">
  <div *ngIf="user_submitted && userdata.email.errors" class="invalid-feedback">
  <div *ngIf="userdata.email.errors.required">Email is required</div>
  </div>

   <br/>
   <input type = "password" formControlName = "password" placeholder = "Password"  [ngClass]="{ 'is-invalid': user_submitted && userdata.password.errors }">
   <div *ngIf="user_submitted && userdata.password.errors" class="invalid-feedback">
  <div *ngIf="userdata.password.errors.required">Password is required</div>
  </div>
   <br/>
   <input type = "submit" value = "submit">

</form>

Note:-1) In this app.component.html, used formControlName with the name of the field and bind the form into app.component.ts file through FormBuilder.

2) When you fill the form value then click on the submit button then show the value in the console.