问题描述
我正在使用Angular 10,并尝试将登录表单的元素绑定到视图模型,但它似乎没有更新。它保持默认的初始值。我在做什么错了?
login.component.html
<div>
<form #loginData="ngForm" (submit)="doLogin()">
<input type="text" [(ngModel)]="loginData.Username" [ngModelOptions]="{standalone: true}">
<input type="password" [(ngModel)]="loginData.Password" [ngModelOptions]="{standalone: true}">
<button type="submit">Sign In</button>
</form>
</div>
login.component.ts
import { Component,OnInit } from '@angular/core';
@Component({
selector: 'app-login',templateUrl: './login.component.html',styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
constructor() { }
loginData: any = {
Username: "abcd",Password: "1234"
}
ngOnInit(): void {
}
doLogin(): void {
console.log(this.loginData); //prints { Username: "abcd",Password: "1234"} every time
}
}
app.module.ts
import { browserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
@NgModule({
declarations: [
AppComponent,LoginComponent
],imports: [
browserModule,AppRoutingModule,FormsModule
],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }
解决方法
更改表单模板变量的名称,它与组件中的loginData
变量冲突。
这是StackBlitz,显示它正常工作。
,您的默认值为: 用户名:“ abcd”, 密码:“ 1234” 这将始终推动这些值。您要做的是这样:
loginData: any = {
Username: "",Password: ""
}