Angular CLI 17.2.3中ngModel绑定select报错及动态表单需求

1. 修复Can't bind to 'ngModel' since it isn't a known property of 'select'错误 #

你使用的是独立组件（standalone: true），[(ngModel)]属于FormsModule中的指令，必须在组件的imports数组中显式导入：

• 在create-accounts.component.ts顶部导入FormsModule：

import { FormsModule } from '@angular/forms';

• 更新组件的imports配置，添加FormsModule：

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

2. 修正其他代码问题 #

（1）初始值与选项值不匹配 #

组件中selectAccount初始值设为"student-form"，但select选项的value是"student"、"teacher"、"resp"，会导致初始选中状态异常，修改初始值：

export class CreateAccountsComponent {
  selectAccount= "student"; // 改为与第一个option的value一致
}

（2）*ngIf条件语法错误 #

模板中*ngIf="selectAccount === student"里的student是未定义变量，需改为字符串字面量（加引号）：

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

（3）模板标签未闭合 #

模板最后一行的<section没有闭合，修正为：

</section> <!-- 补全闭合标签 -->

内容的提问来源于stack exchange，提问作者AyanoQ