How do I use Reactive Forms in Angular 18 without NgModules - Stack Overflow

admin管理员组

文章数量:1336587

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 /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 ?

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 ?

• angular
• angular-reactive-forms
• angular-forms
• angular18

Share Improve this question Follow edited Nov 19, 2024 at 17:20 Naren Murali 59k55 gold badges4444 silver badges7777 bronze badges asked Nov 19, 2024 at 17:09 VihungVihung 13.4k1818 gold badges6767 silver badges9696 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

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 {
  ....
}

Stackblitz Demo

本文标签： How do I use Reactive Forms in Angular 18 without NgModulesStack Overflow