Forms

This page contains recommendations for working with Angular forms, as well as common pitfalls you might encounter.

This guide is a work in progress.

Avoiding Pitfalls

Disabled Attribute

When using Reactive Forms, the disabled HTML attribute works differently than it does with template-driven forms.

In short, the FormControl handles its own disabled state internally and will override the disabled attribute supplied to the HTML attribute. Consider the following example:

Brand

import {Component} from "@angular/core"
import {FormControl, ReactiveFormsModule} from "@angular/forms"

@Component({
  imports: [ReactiveFormsModule],
  selector: "disabled-demo",
  standalone: true,
  template: `
    <form class="grid justify-center gap-2">
      <div class="border-neutral-02 border-1">
        <input name="field-1" [disabled]="true" [formControl]="formControl" />
      </div>
    </form>
  `,
})
export class FormDisabledDemo {
  formControl = new FormControl<string>("")
}

Even though we're setting the input element's disabled attribute to true, the input is still enabled. This is because the Reactive Form control is the single source of truth for the form's state.

Let's look at another example. Here, we're disabling the control using the FormControl, but we're also setting [disabled]="false" in the template.

Brand

import {Component} from "@angular/core"
import {FormControl, ReactiveFormsModule} from "@angular/forms"

@Component({
  imports: [ReactiveFormsModule],
  selector: "enabled-demo",
  standalone: true,
  template: `
    <form class="grid justify-center gap-2">
      <div class="border-neutral-01 border-1">
        <input name="field-1" [disabled]="false" [formControl]="formControl" />
      </div>
    </form>
  `,
})
export class FormEnabledDemo {
  formControl = new FormControl<string>({disabled: true, value: ""})
}

You'll notice that the input field is disabled, and this is expected. The FormControl is the single source of truth for the form's state, so it overrides the HTML disabled attribute.

Note If you try to do this in your code, Angular will emit a warning message to your browser's dev console. Keep an eye on your console during development for helpful indicators like this one.