如何解决在表单中使用ngModel时不会更新
我正在使用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: ""
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。