时间戳

首页 > 解决方案 > NgModel 在密码更改时使用密码填充登录掩码中的所有输入字段

angular - NgModel 在密码更改时使用密码填充登录掩码中的所有输入字段

问题描述

我正面临一种奇怪的行为，对此没有任何解释。问题如下：当用户将用户和密码插入登录提示并且在幕后发生某些事情时，用户字段也填充了用户输入的密码。看起来表单在重新呈现时没有正确填充字段。

代码如下所示（出于演示目的进行了简化）：

登录组件.ts

public selModule = { AuthProps: [{Name: "User", Display: "DUser"}, {Name: "Password", Display: "DPassword"}] };
public loginData: { [key: string]: string } = {};

public changePW() {
    this.loginData['Password'] = "NewTestPw";
}

登录组件.html

<div *ngFor="let authProp of selModule?.AuthProps">
        <label>{{ authProp.Display }}</label>
        <input [type]="handleInputType(authProp)" [(ngModel)]="loginData[authProp.Name]" name="authProp.Name">
</div>
<button (click)="changePw()">Change PW</button>

因此，如果我输入用户名和密码，UI 中的输入元素和 loginDate 都会正确填充：

loginData: {User: "Testuser", Password: "Testpassword"}
User: Testuser
Password: TestPassword

通过单击“更改密码”按钮，仅更改了 loginData['Password']，但用户的输入字段也填充了“NewTestPW”。

loginData: {User: "Testuser", Password: "NewTestPW"}
User: NewTestPW
Password: NewTestPW

为什么会这样？

标签： angular

解决方案

这是意料之中的，因为您有两种方式将其与登录数据密码绑定，当您这样做时，如果 loginData.Password 将被更改，它将反映在文本框中。如果你不想改变你的行为

[(ngModel)]="loginData[authProp.Name]"

至

(change)="handleValue(authProp.Name, $event.target.value)"

在打字稿中

public handleValue(prop, value) {
     this.loginData[prop] = value;
  }

推荐阅读