我正在尝试在Angular 9中创建登录表单。我知道这是Angular中的常见问题,这是因为FormsModule并未导入@NgModule中
但是,我已经导入了FormsModule和ReactiveFormsModule,但是并没有解决我的问题
//from app.module.ts
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
ForumComponent,
PostComponent,
UserComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MaterialModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent],
})
以下是我的login.component.html文件中表单的HTML
<form class="box" action="" #loginForm="ngForm" (ngSubmit)="login()">
<div class="field">
<label for="" class="label">Email</label>
<div class="control has-icons-left">
<input type="email"
placeholder="e.g. [email protected]"
class="input"
[(ngModel)] = "model.email"
required />
<span class="icon is-small is-left">
<i class="fa fa-envelope"></i>
</span>
</div>
</div>
<div class="field">
<label for="" class="label">Password</label>
<div class="control has-icons-left">
<input type="password"
placeholder="*******"
class="input"
[(ngModel)] = "model.password"
required />
<span class="icon is-small is-left">
<i class="fa fa-lock"></i>
</span>
</div>
</div>
<div class="field">
<label for="" class="checkbox">
<input type="checkbox" />
Remember me
</label>
</div>
<div class="field">
<button class="button is-success" [disabled]="!loginForm.valid">
Login
</button>
</div>
</form>
如果需要,我可以共享我的login.component.ts的代码,但是Angular编译器当前抛出的所有错误都引用了登录组件html文件中的问题。谢谢
与ngModel一起使用已弃用,请检查official docs了解详细信息