Angular Model-Driven Form Using VS Code And Node.js

Model-Driven Form(Reactive Form) 

 

In a model-driven approach, the model-driven form which is created in the .ts file is responsible for handling all the user interactions/validations. First, we need to create a model using Angular in-built classes like form group and form controls and then we need to bind a model in the HTML form.

 

Model-driven forms are more powerful and flexible.

 

These are some things that we can't do with template-driven forms,  but with the model-driven form, we can perform those things. If we want to detect if any changes are occurring in any variable we can do that with model-driven form. We can easily use two-way data binding in model-driven forms.

 

Reactive form in angular technique to manage your form in a reactive manner it means that you can manage your form and validation in our component.

 

These forms are the best option when we need a complex form.

 

It is easy to implement like using a model in control, with forms controls. These forms are called model-driven forms because of the model act as a mediator between the component and template. we need to import ReactiveFormsModule in our appModule.ts file.

 

In the .ts file, we need to import 3 more libraries (FormGroup, FormBuilder, and FormControl ).

• FormControl:- it tracks the value of the controls and validates the invalid controls in the form. in the reactive form, we need to initialize FormControl object to use the functionality in our components, which engaged with Html component
• FormGroup:- Tracks the validity and the state of the group of form control instance or moreover, we can say the FormGroup to be a collection of FormControls.
• FormBuilder:- this helps us to the forms along with their initial value and their validations. 

Features of reactive forms or model-driven forms

 

There are few features of reactive form,

1. More flexible
2. no data binding is done
3. More Component code and less Html markup
4. reactive transformation is possible such as 
1. Handling an event based on debounce time
2. handling event when the components are distinct until changed 
3. adding element dynamically 
5. Handles any complex scenarios 
6. Easler unit testing

Validation of the template-driven form

 

The most important part of any form is to add the validations in the application. when we do the fname: new FormControl(), the first arguments in the FormControl is the initial value and the second value is the validation that we can add there. 

 

validations are performed their works the same with both type form(template-driven form and model-driven form). 

 

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 are invalid

So in order to draw a border around the first name whenever the user visite any fields and don't add any value we need to add these classes.

 

Code of Model-driven Form

 

reactivecomponent.css

.form-control{
    text-align: center;
    width: 200px;
    height: 40px;
    color: black;
    border-color: black;
    background-color: cornsilk;
    border-radius: 1px;
    border-style: 0.5px;
}
.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;
}

reactivecomponent.html

<h1 class="text">Welcome to {{title}}</h1>
<div class="container">
  <div class="row">
    <div class="form-bg">
      <form [formGroup]='signupForm' (ngSubmit)='PostData(signupForm)'>
        <div class="form-group">
          <input type="text" class="form-control" formControlName='fname' placeholder="Your first name" >

        </div>
        <br>
        <div class="form-group" >
          <input type="text" class="form-control" formControlName="lname" placeholder="enter lastname" >
        </div>
        <br>
        <div class="form-group">
          <input type="email" class="form-control" formControlName="email" placeholder="Enter Your email" >
        </div>
        <br>
        <div class="form-group">
          <input type="password" class="form-control" formControlName="password" placeholder="Enter your Password">
        </div>
        <br>
        <br>
        <div>
        <input type="submit" class="btn-primary" value="PostData" [disabled]='!signupForm.valid'>
          </div>
      </form>
    </div>
  </div>
</div>

reactivecomponent.ts

import { Component, OnInit } from '@angular/core';
import {FormControl,FormGroup,FormBuilder, NgForm,Validator, Validators } from '@angular/forms'
@Component({
  selector: 'app-reactive',
  templateUrl: './reactive.component.html',
  styleUrls: ['./reactive.component.css']
})
export class ReactiveComponent{
title='reactive form ';
signupForm:FormGroup;
FirstName:string="";
LastName:string="";
Email:string="";
Password:string="";

  constructor(private frmbuilder:FormBuilder){
    this.signupForm=frmbuilder.group({
/*fname:new FormControl(),
      lname:new FormControl(),
      email:new FormControl(),
      password:new FormControl()*/

      fname:['',[Validators.required,Validators.minLength(1)]],
      lname:['',[Validators.required,Validators.minLength(1)]],
      email:['', [Validators.required,Validators.email]],
      password:['', [Validators.required,Validators.minLength(8)]]
    });


  }
  PostData(signupForm:any){
    this.FirstName=signupForm.controls.fname.value;
    this.LastName=signupForm.controls.lname.value;
    this.Email=signupForm.controls.email.value;
    this.Password=signupForm.controls.password.value;
    console.log(this.FirstName);
    console.log(this.LastName);
    console.log(this.Email);
    console.log(this.LastName);

  console.log(signupForm.controls);
  }
  }

appModule.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';
import { ReactiveFormsModule} from '@angular/forms'
import { ReactiveComponent } from './reactive/reactive.component';
import { CheckserviceComponent } from './checkservice/checkservice.component'
import { UserService } from './user.service';
import { PostdataComponent } from './postdata/postdata.component';
@NgModule({
  declarations: [
    AppComponent,
    ReactiveComponent,
    CheckserviceComponent,CheckserviceComponent, PostdataComponent
  ],
  imports: [
    BrowserModule,FormsModule,ReactiveFormsModule
  ],
  providers: [UserService],
  bootstrap: [ReactiveComponent]
})
export class AppModule { }

 now compile this all components with command ng serve after compile all component successfully, open the browser and hit localhost:4200. browser display output like this,

 

Now you can see the postdata button is disabled. now you fill the details in the form for checking the form validations, we left empty few fields then see the form how it is looking like this.

 

 

Now you can see the form empty field is red because the user touched these fields but can't add any value in the fields. The postdata button is disabled now. that means our forms validations are working properly. 

 

Now fill valid details in all in the fields. see how the form looking,

 

 

Now you can see the form all fields value are valid. and the post data button is enabled now. now go to the console and check the errors.

 

 

Now press the postdata button and check,

 

Now you can see console don't have any errors, now press the postdata button and check all values are stored in console or not.

 

 

now you can see all values are stored in the console and our forms are working properly.

 

I hope you enjoy this article. to learn more technologies or logics to follow c#corner or c sharp corner.com