Form Controls in Angular

In the previous chapter, we discussed form validation in Angular. In this chapter, we will delve deeper into Angular’s form controls—including how to construct and manage them—laying the groundwork for later using form data with the HTTP client.

Understanding Form Controls

In Angular, a form control typically refers to an input element (e.g., text fields, checkboxes, radio buttons), each maintaining its own state and data. As users interact with the form, Angular automatically updates the state and value of these controls. Form controls can be either reactive or template-driven.

Creating a Form Control

We can create a form control using Angular’s FormControl class. Below is a simple example demonstrating how to instantiate a form control within a component.

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

@Component({
  selector: 'app-my-form',
  template: `
    <form>
      <label for="name">Name:</label>
      <input id="name" [formControl]="nameControl">
      <p>Your name is: {{ nameControl.value }}</p>
    </form>
  `
})
export class MyFormComponent {
  nameControl = new FormControl('');
}

In this example, we create a form control named nameControl and bind it to an <input> element in the template. User input is automatically reflected in the nameControl.value.

Form Control States

Each form control exposes several key state properties:

• valid: Indicates whether the control is valid.
• invalid: Indicates whether the control is invalid.
• touched: Indicates whether the control has been visited (i.e., blurred after focus).
• dirty: Indicates whether the control’s value has been modified by the user.

These states can be used to provide real-time user feedback—for instance:

<p *ngIf="nameControl.invalid && (nameControl.touched || nameControl.dirty)">
  Name is required.
</p>

Grouping Multiple Form Controls

Real-world forms often contain multiple controls. To manage them collectively, we use the FormGroup class to bundle multiple FormControl instances. Here's an example showing how to define such a group:

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

@Component({
  selector: 'app-my-form',
  template: `
    <form [formGroup]="myForm">
      <label for="name">Name:</label>
      <input id="name" formControlName="name">

      <label for="email">Email:</label>
      <input id="email" formControlName="email">

      <button (click)="onSubmit()">Submit</button>
    </form>
  `
})
export class MyFormComponent {
  myForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl('')
  });

  onSubmit() {
    console.log(this.myForm.value);
  }
}

Here, we define a FormGroup named myForm, containing two controls: name and email. When the user clicks Submit, the current form values are logged to the console.

Dynamically Updating Form Controls

Sometimes, we need to update control values programmatically. Angular provides two methods for this: setValue() and patchValue(). The key difference is that setValue() requires values for all controls in the group, whereas patchValue() allows partial updates:

this.myForm.setValue({ name: 'John', email: 'john@example.com' });

this.myForm.patchValue({ email: 'john.doe@example.com' });

Summary

In this chapter, we explored how to work with form controls in Angular—including creating and managing individual controls, grouping multiple controls into a FormGroup, and dynamically updating control values. These foundational skills prepare us for the next step: sending form data to a server via Angular’s HTTP module.

In the next chapter, we’ll focus on leveraging the HTTP module to submit form data and interact with backend services. If you have further questions about form controls, feel free to revisit this chapter. Stay tuned for what’s coming next!