no-reactive-forms

Restrict the usage of legacy reactive forms (ReactiveFormsModule, FormBuilder, FormGroup, FormControl, FormArray, FormRecord and all their variants), as some parts of them are not reactive in a zoneless application.

Use signals form() instead.

Documentation

• Signals forms guide
• form() API reference

Configuration

• in the recommended preset (see the README for the configuration)
• or just this rule:

{
  "rules": {
    "angular-eslint-zoneless/no-reactive-forms": "error"
  }
}

❌ Invalid

@Component({
  imports: [ReactiveFormModule],
  template: `
    <form [formGroup]="form">
      <input type="text" [formControl]="nameControl" />
    </form>
  `,
})
export class ProfileForm {
  protected nameControl = new FormControl('');
  protected readonly form = new FormGroup({
    name: nameControl,
  });
}

✅ Valid

@Component({
  imports: [FormRoot, FormField],
  template: `
    <form [formRoot]="form">
      <input type="text" [formField]="form.name" />
    </form>
  `,
})
export class ProfileForm {
  private readonly formModel = signal({
    name: '',
  });
  protected readonly form = form(this.formModel);
}

Back to README