Why ngModel doesn't works on the last version of Angular 17?

Question

I am trying to make a form in my angular app, but when i want to implement ngModel on my form :

    <form (ngSubmit)="onSignUp()" #signupForm="ngForm">
        <h1>Connexion</h1>
        <input type="email" name="mail" [(ngModel)]="userLogin.email" placeholder="Email" />
        <input type="password" name="mdp" [(ngModel)]="userLogin.password" placeholder="Password" />
        <a href="#">Mot de passe oublie ?</a>
        <button type="submit">Se Connecter</button>
    </form>

I have this error :

NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'. [plugin angular-compiler]

I can't import FormsModule in the app.module.ts because this file doesn't exists on Angular 17, i only have an app.config.ts file.

Can someone please explain me how to do?

Stearoptene

Answer 1

If your component is set with standalone: true, then you need to add FormsModule to the imports array of the component!

Since it's standalone, we need to add all the necessary dependencies to the imports array!

@Component({
  ...
 imports: [
      ...
      FormsModule,
      ...
  ],
  ...
})

Cafeteria

i did same ,but still same issue – Humerus

Answer 2

Angular standalone application doesn't support common modules directly, instead importing them separately under individual standalone components. This reduces the additional overhead of loading additional modules that are not using in a particular component.

If you are using Angular 17 or latest, follow the instructions:

Create a file named(any name) app.module.ts right under app directory of your angular project and write an array of common imported modules to the file.

import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";

export const AppModule = [
    FormsModule,
    CommonModule,
]

Now import the AppModule array where your components needed:

@Component({
  selector: 'app-standalone',
  standalone: true,
  imports: [
    AppModule
  ],
  templateUrl: './standalone.component.html',
  styleUrl: './standalone.component.scss'
})
export class StandaloneComponent {}

If you need more about the Module, please visit the link click here

Cornice

If you have more query pls visit the link: #77927199 – Cornice

Doest not work. A module is not just an array. And by doing what in @Component -> import, your import is an array of array wich is not supported by angular. – Christean

Dear @dolig, I also provide a link bellow where you can avail your purpose. Hope you not visited. – Cornice