ngModel 在表单中使用时不更新答案

【问题标题】：ngModel isn't updating when used inside a formngModel 在表单中使用时不更新
【发布时间】：2020-10-08 10:21:28
【问题描述】：

我正在使用 Angular 10 并尝试将登录表单的元素绑定到视图模型，但它似乎没有更新。它保持在默认的初始值。我做错了什么？

<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>

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 { }

【问题讨论】：

标签： javascript angular typescript angular-ngmodel 2-way-object-databinding

【解决方案1】：

为表单更改模板变量的名称，它与组件中的 loginData 变量冲突。

这是一个 StackBlitz 显示它正在工作。

【讨论】：

【解决方案2】：

您的默认值为：用户名：“abcd”，密码：“1234” 这将始终推动这些价值观。你需要做的是：

loginData: any = {
    Username: "",
    Password: ""
}

【讨论】：

仍然无法正常工作。它现在只打印{Username: "", Password: ""}。