Angular ngForm表单不显示求助（含NG8003报错）

1. 解决NG8003: No directive found with exportAs 'ngForm'报错 #

ngForm是Angular模板驱动表单的核心指令，你当前只导入了ReactiveFormsModule（响应式表单模块），缺少模板驱动表单所需的FormsModule。

修改app.module.ts，在imports数组中添加FormsModule：

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormularComponent } from './formular/formular.component';

@NgModule({
  declarations: [
    AppComponent,
    FormularComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 修正组件中Angestellter的实例化方式 #

你直接在构造函数中注入Angestellter是错误的，它不是Angular服务，而是自定义模型类，需要手动实例化：

修改formular.component.ts：

import { Component } from '@angular/core';
import { Angestellter } from '../angestellter';

@Component({
  selector: 'app-formular',
  templateUrl: './formular.component.html',
  styleUrl: './formular.component.css',
  
})

export class FormularComponent{
  angestellter: Angestellter = new Angestellter('', '', '', '');

  onSubmit():void{
      console.log("表单提交内容：", this.angestellter);
  };
}

3. 修复模板中的双向绑定错误 #

• 模板中同时使用[(ngModel)]和ngModel="angestellter"会导致绑定冲突，删除所有多余的ngModel="angestellter"属性
• 双向绑定的变量需要指向angestellter实例的属性，而非单独的变量（你组件中没有定义firstName这类单独变量）

修改formular.component.html：

<form #employee="ngForm" (ngSubmit)="onSubmit()">
    <div class="input">
        <div class="form-group">    
            <label class="label" for="first">Vorname: </label>
            <input class="input" id="first" type="text" [(ngModel)]="angestellter.firstName" name="firstName" placeholder="Vorname"/> 
        </div>
        <div class="form-group">
            <label class="label" for="second">Nachname: </label>
            <input class="input" id="second" type="text" [(ngModel)]="angestellter.lastName" name="lastName" placeholder="Nachname" /> 
        </div>
        <div class="form-group">
            <label class="label" for="position">Position: </label>
            <input class="input" id="position" type="text" [(ngModel)]="angestellter.position" name="position" placeholder="Position" /> 
        </div>
        <div class="form-group">
            <label class="label" for="salary">Gehalt: </label>
            <input class="input" id="salary" type="text" [(ngModel)]="angestellter.salary" name="salary" placeholder="Gehalt"/> 
        </div>
        <button type="submit">Senden</button>       
        </div>
</form>

4. 确保组件被正确引用 #

检查app.component.html中是否添加了表单组件的选择器，否则表单不会在页面显示：

<app-formular></app-formular>

完成以上修改后，重新编译运行程序，表单应该能正常显示并实现双向绑定，提交按钮也能触发onSubmit方法输出表单数据。

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