How do I use Reactive Forms in Angular 18 without NgModules

November 19, 2024

I am building a new app using Angular 18.

> ng version
...
Angular CLI: 18.2.12
...

It is a standalone app (with routing), no NgModules and no app.modules.ts file.

I want to use Reactive Forms.

In my component class I have declared

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

and

  public foobarForm = new FormGroup({
    foo: new FormControl(''),
    bar: new FormControl(''),
  });

In my HTML file, I have

<form [formGroup]="foobarForm">
  <input type="text" id="foo" name="foo" formControlName="foo" placeholder="Foo" />
  <input type="text" id="bar" name="bar" formControlName="bar" placeholder="Bar" />
  ...
</form>

I get the following errors

Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’

and

Can’t bind to ‘formControl’ since it isn’t a known property of ‘input’.

Looking art the official docs (at https://angular.dev/guide/forms/reactive-forms), it looks like I have to import ReactiveFormsModule in my app.modules.ts. But I do not have one.

What is the correct way to use Reactive Forms in a standalone app with version > 17 ?

>Solution :

You also have to import the ReactiveFormsModule in the imports array of the standalone component. The module contains the directives required for reactive forms to work like FormGroupDirective, FormControlDirective, which correspond to the attributes [formGroup] and [formControl] in the HTML.

We cannot directly import these directives since they are not standalone.

...
import { ReactiveFormsModule } from '@angular/forms';
...

...
@Component({
   selector: 'app-root',
   template: `
     <form [formGroup]="foobarForm">
       <input type="text" id="foo" name="foo" [formControl]="foo" placeholder="Foo" />
       <input type="text" id="bar" name="bar" [formControl]="bar" placeholder="Bar" />
       ...
     </form>
   `,
   imports: [ReactiveFormsModule],
}) 
export class AppComponent {
  ....
}