Template-Driven Form With Validations in Angular Using VS Code and Node.js

Introduction 

 

In a template-driven approach, a template-driven form is the most common part of any application. Template-driven forms use the FormsModule to develop a template-driven form. A template-driven form is asynchronous in nature. In a this type of form, logic is created in the HTML component. The template-driven form is easy to use. Coding will be run on the HTML page, and validations of the forms are also performed on this page. Finally, the template-driven form uses NgForm and NgModule to develop a Form.

 

Features of template-driven forms 

1. Easy to use
2. Similar to Angular 1.0.
3. Two-way data binding use
4. Minimal component code
5. Automatically tracks forms and data

NgForm

 

It is a directive that helps to create the control group inside the directives. It is attached to the element in HTML and supports the form tag along with some additional features.

 

NgModel

 

When we add NgModel Directive to the control, all the inputs are registered in the NgForm. When we use the NgModel with the form tag, or most importantly with the NgForm, we use the name property of Html controls. We are exporting ngForm in the local variable to use. Some of the properties of the forms and these properties are:

1. regForm.value:- It gives the object containing all the values of the field in the form.
2. regForm.valid:- This gives up the value indicating if the form is valid or not, If the value is valid is true or value is invalid is false.
3. regForm.touched:- It returns true or false when one of the fields in the form is entered and touched.

Let's have look at the (ngSubmit) ="register(regForm)". Here we are using the event binding concept. Instead of Submit the event of the form ngSubmit which will send the actual Http request instead of just submitting the form.

 

Validation in Angular forms

 

Validations are an important aspect of programming. We can't always trust the user when we want to validate data.

 

Angular's set of common validators include min length, max-length, required email. We just need to add the validator directive to the control for assigning the controls to the validators.

 

The following are the classes:

• ng-touched:- Controls have been visited
• ng-untouched:- Controls have not to be visited
• ng-dirty:- Controls value have been changed
• ng-pristine:- Controls value have been changed
• ng-valid:- Controls value are valid
• ng-invalid:- Controls value is invalid

So in order to draw a border around the first name whenever the user visits any field without adding a value, we need to add these classes. Here is the code of the template-driven forms:

 

Appcomponent.css 

.form-control{
    text-align: center;
    width: 200px;
    height: 40px;
    color: black;
    border-color: black;
    border-radius: 1px;
}
.btn-btn-primary{
    text-align: center;
    border-radius: 6px;
    background-color: #1976d2;
    width: 80px;
    height:30px;
    border-style: hidden;
    color: white;
}
input.ng-invalid.ng-touched{
    border-color: red;
}
.text{
    text-align: center;
    font-size: x-large;
}
.container{
    text-align: center;
}

Appcomponent.html

<h1 class="text">{{title}}</h1>
<div class="container">
  <div class="row">
    <div class="form-bg">
      <form #regForm='ngForm' (ngSubmit)='Register(regForm)'>
        <h2 class="text-center">Registeration Page</h2>
      <br>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="First name" name="firstname" required  ngModel>
      </div>
      <br>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Last name" name="lastname" required ngModel>
      </div>
      <br>
      <div class="form-group">
        <input type="email" class="form-control" placeholder="Email" name="email" email required ngModel #email='ngModel'>
        <span class="help-bpx" *ngIf="email.touched && !email.valid">Please enter email value</span>
      </div>
       <br>
      <div class="button-control">
        <button type="submit" class="btn-btn-primary" id="register" [disabled]='!regForm.valid'>Register </button>
      </div>

      </form>
    </div>
  </div>
</div>

appcomponent.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Template Driven-Forms';
  Register(regForm:any){
    debugger;
    var firstname=regForm.controls.firstname.value;
    var lastname=regForm.controls.lastname.value;
    var email=regForm.controls.lastname.value;
    console.log(regForm);
  }
}

 module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms'
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now compile this all components with command ng serve. After compiling all components successfully, open the browser and hit localhost:4200. The browser display output will look like this:

Now you can see that the register button is disabled. Fill the details in the form for checking the form validations. We left a few fields empty. Then see how the form looks:

 

After filling invalid data in the form, you can see the form fields show the color red in invalid Field and the register button is disabled. Fill all valid input in the form.

 

After filling all valid info, you can see that the register button is enabled. Now you can see in the form that our form validations are performing their work properly. That means our form is complete with validations and ready to use.

 

Now you can see that the console didn't have any error and our form is ready to use. Now press the register button.

 

 

Now you can see that when the user clicks on the register button, then the console creates an object. Now click on the object and check it out.

 

 

 

Now you can see when the user clicks on the object then object open no of the sub-object. Now click on the Form: 

 

 

 

You can see when the user clicks on the form, it contains our valid data which we will be entered into the form. That means that our form is working properly.

 

I hope you enjoyed this article. To learn more logic and technology, follow C# Corner and follow my blog to learn Angular. 

 

Thank you!