Angular在HTML元素上使用ngModel出现指令缺失错误咨询

你遇到的错误大概率是两个核心原因导致的：同时混用了模板驱动表单（ngModel）和响应式表单（formControlName）的语法，或者没有在模块中导入必要的表单模块。我来帮你一步步修复：

第一步：先确保模块导入正确 #

不管你选择哪种表单实现方式，都需要在组件所属的NgModule中导入对应的表单模块。打开你的模块文件（比如app.module.ts或者功能模块文件），添加以下导入代码：

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

@NgModule({
  imports: [
    // 保留你已有的其他导入（比如BrowserModule等）
    FormsModule,
    ReactiveFormsModule
  ]
})
export class YourModuleName { }

第二步：二选一修复表单代码 #

Angular不建议同时使用ngModel和formControlName，你需要根据表单复杂度选择其中一种方案：

方案1：模板驱动表单（用ngModel） #

适合简单表单场景，去掉formControlName，保留ngModel和模板引用变量：

<div class="form-group">
  <label for="funktion">Funktion</label>
  <select id="funktion" class="form-control" [(ngModel)]="selectedFunktion" #Funktion="ngModel" required>
    <option *ngFor="let fun of funktionen" [value]="fun.Name">{{fun.Name}}</option>
  </select>
</div>
<div *ngIf="Funktion.value === 'Administrator'">
  Some Text here
</div>

同时在你的组件类中定义绑定的变量：

// 组件类.ts文件中
selectedFunktion: string = '';

方案2：响应式表单（用formControlName） #

适合复杂表单场景，去掉ngModel和模板引用变量，依赖表单组的控制值：
首先在组件类中定义表单组：

import { FormGroup, FormControl, Validators } from '@angular/forms';

// 组件类内部
myForm = new FormGroup({
  funktion: new FormControl('', Validators.required)
});

然后修改模板代码：

<form [formGroup]="myForm">
  <div class="form-group">
    <label for="funktion">Funktion</label>
    <select formControlName="funktion" id="funktion" class="form-control" required>
      <option *ngFor="let fun of funktionen" [value]="fun.Name">{{fun.Name}}</option>
    </select>
  </div>
  <div *ngIf="myForm.get('funktion')?.value === 'Administrator'">
    Some Text here
  </div>
</form>

错误原因说明 #

1. 指令冲突：同时使用formControlName（响应式表单语法）和ngModel（模板驱动表单语法）会让Angular无法正确解析表单指令，从而抛出"There is no directive with..."的错误。
2. 模块缺失：如果没导入FormsModule或ReactiveFormsModule，Angular识别不了ngModel、formControlName这些表单专属指令，也会触发相同的错误提示。

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