Angular 6 Template Driven Form Validations

Angular 6 Template Driven Form Validations

1. Create a form component.
2. Create an Angular Form 

3. Validating Email and Password

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 ect can also be 
    declared and validated for single element or control's 

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.