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';
}
You must import FormsModule in create-accounts-component.ts like FontAwesomeModule