User Input and Forms in Angular

User Input and Forms in Angular

At some point, you’re going to want to collect some data from your users. That might be some text for a status update, their name and shipping address, a search term, a title for their todo list item, or anything else.

Whatever the data is, the user is going to be entering it into one of the templates in your application. We’ve already looked at a simple example of this using [(ngModel)], let’s revisit that now:

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

@Component({
  selector: 'app-home',
  template: `
    <p>I am the home page</p>
    <input [(ngModel)]="firstName" (ngModelChange)="logChange()" />
  `,
  imports: [FormsModule],
})
export class HomeComponent {
  firstName = 'Josh';

  logChange() {
    console.log(this.firstName);
  }
}

Note

The FormsModule must be included in the component you are trying to access ngModel in.

I’ve extended this into a complete example now. I’ve also set up an event binding for (ngModelChange) so that you can see every time the user changes the input, that change is reflected on this.firstName.

Now we have access to some data that the user has supplied, and we can do whatever we like with it. If we wanted, we could bind to values in an object like this to get multiple values:

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

@Component({
  selector: 'app-home',
  template: `
    <p>I am the home page</p>
    <input [(ngModel)]="formData.firstName" (ngModelChange)="logChange()" />
    <input [(ngModel)]="formData.lastName" (ngModelChange)="logChange()" />
  `,
  imports: [FormsModule],
})
export class HomeComponent {
  formData = {
    firstName: '',
    lastName: '',
  };

  logChange() {
    console.log(this.formData);
  }
}

This approach works quite well for simple forms, but can become more difficult for larger/more complex forms if implemented naively. We might want to include validations on the forms to enforce certain values, react to value changes, dynamically add/remove fields, and more. The more popular approach generally is to use ReactiveForms.

I emphasised generally because there are proponents of template driven forms that rely on using ngModel even for more complex form situations. Proponents of this approach include industry veterans who have a great deal of knowledge and experience. This is not an approach I have ever used for any substantial amount of time so I can’t speak too much to its benefits or downsides, but it is certainly a valid architectural approach and definitely not something that should be dismissed out of hand as just something for “simple” forms.

Nonetheless, we will be focusing on just one approach primarily: ReactiveForms.

Reactive Forms

To use ReactiveForms we will need to replace the FormsModule in our imports with ReactiveFormsModule. The FormsModule is what provides us with ngModel and it is possible to include both but, generally, if we are using ReactiveForms we won’t be using ngModel.

The general idea behind a reactive form is that it is made up of a FormGroup (or multiple) and within that group will be multiple FormControl instances. The group collects things together, and the individual controls are tied to a specific input. In this way, we could apply validations to a specific control and check if it is valid, and we could also apply validations to an entire group and check if the entire group is valid.

We might create a reactive form like this:

import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-home',
  template: `
    <form [formGroup]="myForm">
      <input formControlName="firstName" type="text" />
      <input formControlName="lastName" type="text" />
    </form>
  `,
  imports: [ReactiveFormsModule],
})
export class HomeComponent {
  myForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
}

Notice that we give names to our group and controls, and then we reference those in the template with the formGroup and formControlName properties.

What we have just done is fine, although you may find it weird we are manually creating new instances of FormGroup and FormControl with the new keyword whereas we would typically use dependency injection. There isn’t anything wrong with creating a form this way, but it does lead to quite a bit of unnecessary typing, which is where the FormBuilder comes into the picture.

Form Builder

We are going to do exactly what we just did above, except we are going to use the FormBuilder this time. The ReactiveFormsModule provides this for us, and we can inject it into our component:

import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-home',
  template: `
    <form [formGroup]="myForm">
      <input formControlName="firstName" type="text" />
      <input formControlName="lastName" type="text" />
    </form>
  `,
  imports: [ReactiveFormsModule],
})
export class HomeComponent {
  private fb = inject(FormBuilder);

  myForm = this.fb.group({
    firstName: [''],
    lastName: [''],
  });
}