在表单内使用时 ngModel 不会更新

Question

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

登录.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>

登录组件.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

  }

}

应用程序模块.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 { }

Answer 1

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

Answer 2

您的默认值为：用户名：“abcd”，密码：“1234” 这将始终推送这些值。你要做的是：loginData: any = {&nbsp; &nbsp; Username: "",&nbsp; &nbsp; Password: ""}