TDF Form Validation Angular 6

Angular Forms - what is it all about?

A large category of frontend applications are very form-intensive, especially in the case of enterprise development. Many of these applications are basically just huge forms, spanning multiple tabs and dialogs and with non-trivial validation business logic.

Every form-intensive application has to provide answers for the following problems:

1. how to keep track of the global form state
2. know which parts of the form are valid and which are still invalid
3. properly displaying error messages to the user so that the user knows what to do to make the form valid. All of these are non-trivial tasks tha

This form has been implemented by using the template-driven forms approach of Angular 6. This means that a component’s template was used to arrange the forms HTML elements. In addition Angular 6 form directives have been used in the template to enable the framework to construct the internal control model that implements form functionality.

following template code was used:

form-page-component.ts:

import { Component } from "@angular/core";

@Component({
    selector:"my-contact-component",
    templateUrl:"./contact-page-component.html",
    styleUrls:["./contact-page-component.css"]
})

export class MyContactPageComponent {
  display(data:any){
    console.log(data);
  }
    
}

form-page-component.html:

<div class="container">
  <h2>Conatct Us</h2>
  div class="contact_form">
  <form #funnyDayaForm ="ngForm" (ngSubmit) ="display(funnyDayaForm.value)">
  <div class="form-group">
    <input type="text" #nameRef="ngModel" required  pattern="^[a-zA-Z][a-zA-Z ]+" maxlength="10" minlength="4" class="form-control" placeholder="First Name" name="name" ngModel> 
    <div *ngIf="nameRef.errors && (nameRef.dirty || nameRef.touched)" class="alert alert-danger">
      <div [hidden]="!nameRef.errors.required">
        First Name is required
      </div>
      <div [hidden]="!nameRef.errors.pattern">
        Only alphabetsallowed
      </div>
      <div [hidden]="!nameRef.errors.minlength">
        Please Enter Atleast 4 Characters
      </div>
      <div [hidden]="!nameRef.errors.maxlength">
        Please Enter Atleast 10 Characters
      </div>
    </div>
  </div>
  <div class="form-group">
    <input type="text" #lastRef="ngModel" required pattern="^[a-zA-Z][a-zA-Z ]+" maxlength="10" minlength="4" class="form-control" placeholder="Last Name" name="lastname" ngModel>
    <div *ngIf="lastRef.errors && (lastRef.dirty || lastRef.touched)" class="alert alert-danger">
      <div [hidden]="!lastRef.errors.required">
        Last Name is required 
      </div>
      <div [hidden]="!lastRef.errors.pattern">
        Only alphabetsallowed
      </div>
      <div [hidden]="!lastRef.errors.minlength">
        Please Enter Atleast 4 Characters
      </div>
      <div [hidden]="!lastRef.errors.maxlength">
        Please Enter Atleast 10 Characters
      </div>
    </div>
  </div>
  <div class="form-group">
    <input type="text" #mobileRef="ngModel" required pattern="[0-9]*" maxlength="10" minlength="10" class="form-control" placeholder="Mobile Number" name="mobile" ngModel> 
    <div *ngIf="mobileRef.errors && (mobileRef.dirty || mobileRef.touched)" class="alert alert-danger">
      <div [hidden]="!mobileRef.errors.pattern">
        Mobile numberr should be only numbers
      </div>
      <div [hidden]="!mobileRef.errors.maxlength">
        Please Enter Atleast 10 Digit Number 
      </div>
      <div [hidden]="!mobileRef.errors.minlength">
        Please Enter Atleast 10 Digit Number 
      </div>
      <div [hidden]="!mobileRef.errors.required">
        Mobile is required 
      </div>
    </div>
  </div>
  <div class="form-group">
    <input type="text" #emailRef="ngModel" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" class="form-control"  placeholder="Email" name="email" ngModel>
    <div *ngIf="emailRef.errors && (emailRef.dirty || emailRef.touched)" class="alert alert-danger">
      <div [hidden]="!emailRef.errors.required">
        Email is required
      </div>
      <div [hidden]="!emailRef.errors.pattern">
        Email format should be
      </div>
    </div>
  </div>
  <div class="form-group">
    <textarea name="Message" placeholder="Message" required=""></textarea>
  </div>
  <button type="submit" [disabled]=!(funnyDayaForm.form.valid)>Submit</button>
  </form>
</div>
</div> 

form-page-component.css:

.contact_form input[type="text"] {
    width: 100%;
    color: black;
    background: none;
    outline: none;
    font-size: 1em;
    height: 45px;
    border: 1px solid #ddd;
    -webkit-appearance: none;
    display: inline-block;
  }
    .contact_form textarea {
    resize: none;
    width: 100%;
    background: none;
    color: black;
    font-size: 1em;
    outline: none;
    padding: .6em .8em;
    border: 1px solid #ddd;
    min-height: 10em;
    -webkit-appearance: none;
  }
  .contact_form button[type="submit"] {
    outline: none;
    width: 100%;
    color: #fff;
    padding: 0.8em 4em;
    font-size: 1em;
    margin: 20px 0%;
    -webkit-appearance: none;
    background: #007bc4 ;
    border: 2px solid #ffffff;
    -webkit-transition: 0.5s all;
    transition: 0.5s all;
    -moz-transition: 0.5s all;
  }
  .form-group {
    margin: 0 0 15px 0;
  }   

app.module.ts:

We Must Import FormsModule form "@angular/forms" package

app.module.ts:

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

@ngModel({
	
 imports:[
   FormModule
 ],

})