iam 是 Angular 的新手,我尝试创建一个表单作为 ngForm。我的问题是,当程序成功编译时,表单不会显示在我的网站上。我认为我对“ngForm”指令有疑问。 以前的错误消息是:“[ERROR] NG8003:未找到带有 exportAs 'ngForm' 的指令” 也许有人可以帮助我。这是我的代码
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)]="firstName" name="firstName" placeholder="Vorname" ngModel="angestellter"/>
</div>
<div class="form-group">
<label class="label" for="second">Nachname: </label>
<input class="input" id="second" type="text" [(ngModel)]="lastName" name="lastName" placeholder="Nachname" ngModel="angestellter" />
</div>
<div class="form-group">
<label class="label" for="position">Position: </label>
<input class="input" id="position" type="text" [(ngModel)]="position" name="position" placeholder="Position" ngModel="angestellter" />
</div>
<div class="form-group">
<label class="label" for="salary">Gehalt: </label>
<input class="input" id="salary" type="text" [(ngModel)]="salary" name="salary" placeholder="Gehalt" ngModel="angestellter"/>
</div>
<button type="submit">Senden</button>
</div>
</form>
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{
constructor(public angestellter: Angestellter){}
onSubmit():void{
console.log("Hallo");
};
}
angestellter.ts
export class Angestellter {
constructor(
public firstName: string,
public lastName: string,
public position: string,
public salary: string,
){}
}
app.component.ts
import { NgModule } from '@angular/core';
import { 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,
ReactiveFormsModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
感谢所有回答的人。
我做了很多尝试来使表单与表单模型双向。
将
FormModules
导入到您的模块