htmlangulartypescriptngmodel

Can't bind to 'ngModel' since it isn't a known property of 'select' in angular cli 17.2.3


I want to create a dashboard page where the admin can create accounts for teachers, students, and respondents. When the admin selects the account type, a specific form will appear on the same page. I tried using ngModel, but I encountered the error mentioned above

create-accounts.component.ts

    <section class="p-6 rounded-md bg-slate-400 mt-4">
        <h1 class="mb-2 text-3xl">creer comptes</h1>
        <select [(ngModel)]="selectAccount" name="selectAccount">
            <option value="student"  selected>etudiant</option>
            <option value="teacher" >enseignant</option>
            <option value="resp">responsable</option>
        </select>

        <div *ngIf="selectAccount === student">
            <app-student-form></app-student-form>
        </div>
        <div *ngIf="selectAccount === teacher">
            <app-teacher-form></app-teacher-form>
        </div>
        <div *ngIf="selectAccount === resp">
            <app-resp-form></app-resp-form>
        </div>
    </section

create-accounts-component.ts

import { Component } from '@angular/core';
import { TeacherFormComponent } from '../../components/form-components/teacher-form/teacher-form.component';
import { StudentFormComponent } from '../../components/form-components/student-form/student-form.component';
import { RespFormComponent } from '../../components/form-components/resp-form/resp-form.component';



@Component({
  selector: 'app-create-accounts',
  standalone: true,
  imports: [FontAwesomeModule, TeacherFormComponent, StudentFormComponent, RespFormComponent,],
  templateUrl: './create-accounts.component.html',
  styleUrl: './create-accounts.component.css'
})

export class CreateAccountsComponent {
  selectAccount= "student-form";
}

app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import { LoginComponent } from './pages/login/login.component';
import { RecoverPasswordComponent } from './pages/recover-password/recover-password.component';
import { CreateAccountsComponent } from './pages/admin/administrator/create-accounts/create-accounts.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, LoginComponent, RecoverPasswordComponent, CreateAccountsComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

export class AppComponent {
  title = 'my-app';
}

Solution

  • You must import FormsModule in create-accounts-component.ts like FontAwesomeModule