Angular 6 Reactive Forms vs Template Driven Forms

Posted By : Rajan Rawat | 24-Sep-2018

Angular2

Woking with Angular 6 Forms

As we all know what forms are it is a most useful and present feature in any website or application. If we what is the use of form then I say it is used for endless data-entry like authentication, profile creation or like order submission.

For building a form which is easy-to-use we need a framework like angular 6 because it supports the two-way binding, validation changes tracking and handling the errors.

Types of Form in angular 6

Reactive Forms
Template driven forms

Reactive Forms

Reactive forms in angular 6 or also known as model-driven forms. These forms offer you the reactive and validation patterns. Reactive forms module follows the reactive programming and it supports the data management flow explicitly. User Interface oriented form will keep HTML controls and states on the app screen

Example:-

Put below code in your HTML file component

                ≤ form [formGroup]='signupForm' (ngSubmit)="PostData(signup)"≥
      ≤fieldset class="form-group" ≥
          ≤ input class="form-control" placeholder="Firstname" formControlName="fname" input type="text"≥
      ≤/fieldset≥
      ≤fieldset class="form-group"≥
         ≤ input class="form-control" placeholder="Lastname" formControlName='lname' input type="text"≥
      ≤/fieldset≥
      ≤ fieldset class="form-group"≥
         ;≤ input class="form-control" placeholder="email" formControlName='Emailid' input type="email"≥
      ≤/fieldset≥
      ≤fieldset class="form-group"≥
         ≤ input class="form-control" placeholder="Password" formControlName='userpassword' input type="password">
      ≤/fieldset≥
      ≤ button class="btn btn-primary" type="submit"≥ submit≤/button≥
      ≤/form≥

JS CODE

Put below code in your TS file component

               ngOnInit() {
	this.signupForm = this.formBuilder.group({  
		fname: ['',],
		lname: [''],
		userpassword: [''],
		Emailid: ['']
	});
    this.registerForm = this.formBuilder.group({
        firstName: ['', Validators.required],
        lastName: ['', Validators.required],
        email: ['', [Validators.required, Validators.email]],
        password: ['', [Validators.required, Validators.minLength(6)]]
        });
    }   
PostData(signup){  
		this.reactive = [this.signupForm.value];

	}

Template driven forms

On the other side, the template driven form will have a different approach.

This forms approach is that you can put your form controls in the HTML form like the select an input tag in the component. These controls are created using angular 6 directive approach using the information from the data bindings. This form uses the ngModel directive approach for the push and pulls the data values from the form. So by using we can use the two-way binding in the form.

Example:-

Put the below code in HTML file component

                ≤form name="form" (ngSubmit)="tempdata()" novalidate≥
      ≤fieldset class="form-group"≥
         ≤input type="text" class="form-control" name="firstName" [(ngModel)]="model.firstName"  placeholder= "Firstname" /≥
      ≤/fieldset≥
      ≤fieldset class="form-group"≥
         ≤input type="text" class="form-control" name="lastName" [(ngModel)]="model.lastName"  placeholder="Lastname"	/≥
      ≤/fieldset≥
      ≤fieldset class="form-group"≥
         ≤input type="text" class="form-control" name="email" [(ngModel)]="model.email"  placeholder="Email" /≥
      ≤/fieldset≥
      ≤fieldset class="form-group"≥
         ≤input type="password" class="form-control" name="password" [(ngModel)]="model.password"  placeholder="Password" /≥
      ≤/fieldset≥
      ≤button class="btn btn-primary">submit≤/button≥
      ≤/form≥

Conclusion:- The major difference between both of them is reactive form provides the one way binding and template are driven provides the two-way binding.