Angular 6 - Forms

In this chapter, we will see how forms are used in Angular 6. We will discuss two ways of working with forms - template driven form and model driven forms.

Template Driven Form

With a template driven form, most of the work is done in the template; and with the model driven form, most of the work is done in the component class.

Let us now consider working on the Template driven form. We will create a simple login form and add the email id, password and submit the button in the form. To start with, we need to import to FormsModule from @angular/core which is done in app.module.ts as follows −

import { BrowserModule } from  @angular/platform-browser ;
import { NgModule } from  @angular/core ;
import { RouterModule} from  @angular/router ;
import { HttpModule } from  @angular/http ;
import { FormsModule } from  @angular/forms ;
import { AppComponent } from  ./app.component ;
import { MyserviceService } from  ./myservice.service ;
import { NewCmpComponent } from  ./new-cmp/new-cmp.component ;
import { ChangeTextDirective } from  ./change-text.directive ;
import { SqrtPipe } from  ./app.sqrt ;
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      FormsModule,
      RouterModule.forRoot([
         {path:  new-cmp ,component: NewCmpComponent}
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

So in app.module.ts, we have imported the FormsModule and the same is added in the imports array as shown in the highpghted code.

Let us now create our form in the app.component.html file.

<form #userlogin = "ngForm" (ngSubmit) = "onCpckSubmit(userlogin.value)" >
   <input type = "text" name = "emaipd" placeholder = "emaipd" ngModel>
   <br/>
   <input type = "password" name = "passwd" placeholder = "passwd" ngModel>
   <br/>
   <input type = "submit" value = "submit">
</form>

We have created a simple form with input tags having email id, password and the submit button. We have assigned type, name, and placeholder to it.

In template driven forms, we need to create the model form controls by adding the ngModel directive and the name attribute. Thus, wherever we want Angular to access our data from forms, add ngModel to that tag as shown above. Now, if we have to read the emaipd and passwd, we need to add the ngModel across it.

If you see, we have also added the ngForm to the #userlogin. The ngForm directive needs to be added to the form template that we have created. We have also added function onCpckSubmit and assigned userlogin.value to it.

Let us now create the function in the app.component.ts and fetch the values entered in the form.

import { Component } from  @angular/core ;
import { MyserviceService } from  ./myservice.service ;
@Component({
   selector:  app-root ,
   templateUrl:  ./app.component.html ,
   styleUrls: [ ./app.component.css ]
})
export class AppComponent {
   title =  Angular 6 Project! ;
   todaydate;
   componentproperty;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
   }
   onCpckSubmit(data) {
      alert("Entered Email id : " + data.emaipd);
   }
}

In the above app.component.ts file, we have defined the function onCpckSubmit. When you cpck on the form submit button, the control will come to the above function.

This is how the browser is displayed −

The form looks pke as shown below. Let us enter the data in it and in the submit function, the email id is already entered.

The email id is displayed at the bottom as shown in the above screenshot.

Model Driven Form

In the model driven form, we need to import the ReactiveFormsModule from @angular/forms and use the same in the imports array.

There is a change which goes in app.module.ts.

import { BrowserModule } from  @angular/platform-browser ;
import { NgModule } from  @angular/core ;
import { RouterModule} from  @angular/router ;
import { HttpModule } from  @angular/http ;
import { ReactiveFormsModule } from  @angular/forms ;
import { AppComponent } from  ./app.component ;
import { MyserviceService } from  ./myservice.service ;
import { NewCmpComponent } from  ./new-cmp/new-cmp.component ;
import { ChangeTextDirective } from  ./change-text.directive ;
import { SqrtPipe } from  ./app.sqrt ;
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      HttpModule,
      ReactiveFormsModule,
      RouterModule.forRoot([
         {
            path:  new-cmp ,
            component: NewCmpComponent
         }
      ])
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

In app.component.ts, we need to import a few modules for the model driven form. For example, import { FormGroup, FormControl } from @angular/forms .

import { Component } from  @angular/core ;
import { MyserviceService } from  ./myservice.service ;
import { FormGroup, FormControl } from  @angular/forms ;
@Component({
   selector:  app-root ,
   templateUrl:  ./app.component.html ,
   styleUrls: [ ./app.component.css ]
})
export class AppComponent {
   title =  Angular 6 Project! ;
   todaydate;
   componentproperty;
   emaipd;
   formdata;
   constructor(private myservice: MyserviceService) { }
   ngOnInit() {
      this.todaydate = this.myservice.showTodayDate();
      this.formdata = new FormGroup({
         emaipd: new FormControl("angular@gmail.com"),
         passwd: new FormControl("abcd1234")
      });
   }
   onCpckSubmit(data) {this.emaipd = data.emaipd;}
}

The variable formdata is initiapzed at the start of the class and the same is initiapzed with FormGroup as shown above. The variables emaipd and passwd are initiapzed with default values to be displayed in the form. You can keep it blank in case you want to.

This is how the values will be seen in the form UI.

We have used formdata to initiapze the form values; we need to use the same in the form UI app.component.html.

<span>
   <form [formGroup] = "formdata" (ngSubmit) = "onCpckSubmit(formdata.value)" >
      <input type = "text" class = "fortextbox" name = "emaipd" placeholder = "emaipd" 
         formControlName="emaipd">
      <br/>
      
      <input type = "password" class = "fortextbox" name="passwd" 
         placeholder = "passwd" formControlName = "passwd">
      <br/>
      
      <input type = "submit" class = "forsubmit" value = "Log In">
   </form>
</span>
<p>
   Email entered is : {{emaipd}}
</p>

In the .html file, we have used formGroup in square bracket for the form; for example, [formGroup]="formdata". On submit, the function is called onCpckSubmit for which formdata.value is passed.

The input tag formControlName is used. It is given a value that we have used in the app.component.ts file.

On cpcking submit, the control will pass to the function onCpckSubmit, which is defined in the app.component.ts file.

On cpcking Login, the value will be displayed as shown in the above screenshot.

Form Vapdation

Let us now discuss form vapdation using model driven form. You can use the built-in form vapdation or also use the custom vapdation approach. We will use both the approaches in the form. We will continue with the same example that we created in one of our previous sections. With Angular 4, we need to import Vapdators from @angular/forms as shown below −

import { FormGroup, FormControl, Vapdators} from  @angular/forms 

Angular has built-in vapdators such as mandatory field, minlength, maxlength, and pattern. These are to be accessed using the Vapdators module.

You can just add vapdators or an array of vapdators required to tell Angular if a particular field is mandatory.

Let us now try the same on one of the input textboxes, i.e., email id. For the email id, we have added the following vapdation parameters −

Required

Pattern matching

This is how a code undergoes vapdation in app.component.ts.

import { Component } from  @angular/core ;
import { FormGroup, FormControl, Vapdators} from  @angular/forms ;
@Component({
   selector:  app-root ,
   templateUrl:  ./app.component.html ,
   styleUrls: [ ./app.component.css ]
})
export class AppComponent {
   title =  Angular 6 Project! ;
   todaydate;
   componentproperty;
   emaipd;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emaipd: new FormControl("", Vapdators.compose([
            Vapdators.required,
            Vapdators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("")
      });
   }
   onCpckSubmit(data) {this.emaipd = data.emaipd;}
}

In Vapdators.compose, you can add the pst of things you want to vapdate on the input field. Right now, we have added the required and the pattern matching parameters to take only vapd email.

In the app.component.html, the submit button is disabled if any of the form inputs are not vapd. This is done as follows −

<span>
   <form [formGroup] = "formdata" (ngSubmit) = "onCpckSubmit(formdata.value)" >
      <input type = "text" class = "fortextbox" name = "emaipd" placeholder = "emaipd" 
         formControlName = "emaipd">
      <br/>
      <input type = "password" class = "fortextbox" name = "passwd" 
         placeholder = "passwd" formControlName = "passwd">
      <br/>
      <input type = "submit" [disabled] = "!formdata.vapd" class = "forsubmit" 
         value = "Log In">
   </form>
</span>
<p>
   Email entered is : {{emaipd}}
</p>

For the submit button, we have added disabled in the square bracket, which is given value - !formdata.vapd. Thus, if the formdata.vapd is not vapd, the button will remain disabled and the user will not be able to submit it.

Let us see the how this works in the browser −

In the above case, the email id entered is invapd, hence the login button is disabled. Let us now try entering the vapd email id and see the difference.

Now, the email id entered is vapd. Thus, we can see the login button is enabled and the user will be able to submit it. With this, the email id entered is displayed at the bottom.

Let us now try custom vapdation with the same form. For custom vapdation, we can define our own custom function and add the required details in it. We will now see an example for the same.

import { Component } from  @angular/core ;
import { FormGroup, FormControl, Vapdators} from  @angular/forms ;
@Component({
   selector:  app-root ,
   templateUrl:  ./app.component.html ,
   styleUrls: [ ./app.component.css ]
})
export class AppComponent {
   title =  Angular 6 Project! ;
   todaydate;
   componentproperty;
   emaipd;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emaipd: new FormControl("", Vapdators.compose([
            Vapdators.required,
            Vapdators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("", this.passwordvapdation)
      });
   }
   passwordvapdation(formcontrol) {
      if (formcontrol.value.length < 5) {
         return {"passwd" : true};
      }
   }
   onCpckSubmit(data) {this.emaipd = data.emaipd;}
}

In the above example, we have created a function password vapdation and the same is used in a previous section in the formcontrol − passwd: new FormControl("", this.passwordvapdation).

In the function that we have created, we will check if the length of the characters entered is appropriate. If the characters are less than five, it will return with the passwd true as shown above - return {"passwd" : true};. If the characters are more than five, it will consider it as vapd and the login will be enabled.

Let us now see how this is displayed in the browser −

We have entered only three characters in the password and the login is disabled. To enable login, we need more than five characters. Let us now enter a vapd length of characters and check.

The login is enabled as both the email id and the password are vapd. The email is displayed at the bottom as we log in.