Reactive Template-Driven forms with Angular

Reactive Template-Driven forms with Angular

Reactive Template-Driven forms with Angular.If you’re familiar with Angular in general and forms in particular, you probably know that there are two different ways to manage forms worth Angular.

While we could endlessly debate about which option is better than the other (template-driven or reactive forms?), I want to focus instead on a more pragmatic approach and show you how you can use both approaches when you need features from reactive from within a template-driven form.

Example of template-driven form

The nice thing about template-driven forms is that their definition happens entirely within HTML templates.

Making a form template-driven only requires two things: Importing the FormsModule in your app.module.ts and then using the ngModel directive on form inputs/dropdowns/checkboxes within an ****element:


  Firstname:


  Lastname:


That’s all you need to get the benefits of template-driven forms. With the above code, Angular will automatically add CSS classes to all form elements to reflect the current state of the form (is it valid, invalid, pristine, dirty, touched or untouched?).

Example of reactive form

A reactive form also requires a component with the Typescript definition of your form:

export class ReactiveFormComponent implements OnInit {

  registerForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {}
  ngOnInit() {
    this.registerForm = this.formBuilder.group({
      firstname: ['', Validators.required],
      lastname: ''
    })
  }
}

But that’s not it, as reactive forms also require an HTML template, which seems redundant:


  Firstname:


  Lastname:

The main benefit of reactive-forms is that we can now subscribe to value changes or state changes on any of our form items:

this.registerForm.controls.firstname.valueChanges
  .subscribe(newValue => // Do something with new value ... // );

How to get the best of both approaches?

What if I want to subscribe to values of just a couple of form inputs? Should I switch my template-driven form entirely to a reactive one just for that purpose?

Luckily, the answer is no. Let’s create a simple template-driven form:


   First name: 

   Last name: 


Submit

Now in the Typescript class of the component that defines that form, we’re going to ask Angular to give us a reference to the ngForm directive applied to the form element using the @ViewChild decorator.

This is what that code looks like:

import { Component, ViewChild} from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({...})
export class AppComponent{
@ViewChild(NgForm, {static: true})
    form: NgForm;

With the above code, we now have a reference to the ngForm directive, which gives us access the same valueChanges and statusChangesobservables for the entire form:

ngOnInit() {
   this.form.statusChanges.subscribe(status => console.log(status));
    this.form.valueChanges.subscribe(newVal => console.log(newVal));
}

And that’s it! Now we can implement reactive features in our component without having to use a full-blown reactive form.

My name is *[Alain Chautard](http://www.alainchautard.com/?source=post_page--------------------------- "Alain Chautard*"). I am a Google Developer Expert in Angular, as well as founding consultant and trainer at *[Angular Training](http://www.angulartraining.com/?source=post_page--------------------------- "Angular Training*")* where I help development teams learn and become proficient with Angular.> My name is *[*Alain Chautard](http://www.alainchautard.com/?source=post_page--------------------------- "Alain Chautard*"). I am a Google Developer Expert in Angular, as well as founding consultant and trainer at *[Angular Training](http://www.angulartraining.com/?source=post_page--------------------------- "Angular Training*")* where I help development teams learn and become proficient with Angular.> My name is *[*Alain Chautard](http://www.alainchautard.com/?source=post_page--------------------------- "Alain Chautard*"). I am a Google Developer Expert in Angular, as well as founding consultant and trainer at *[Angular Training](http://www.angulartraining.com/?source=post_page--------------------------- "Angular Training*")* where I help development teams learn and become proficient with Angular.* Further reading:

Angular RxJS: Observables, Observers and Operators Introduction

The Pros and Cons of Angular Development

Real Time Apps with TypeScript: Integrating Web Sockets, Node & Angular

Angular 8 - Reactive Forms Validation Example

Angular 8 User Registration and Login Example and Tutorial

Understanding of ngRx with Redux in Angular

Using NoSQL PouchDB and SQLite with Ionic 4 & Angular: A CRUD Example

angular angular-js javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

What are the differences between the various JavaScript frameworks? E.g. Vue.js, Angular.js, React.js

What are the differences? Do they each have specific use contexts?