Question

我正在与Angular进行简单的用户名和密码对话。我有一个模板：

<label class="welcome-content">Username:</label>
<input #userName type="text" id="txtLoginUsername" (keyup.enter)="loginUser(userName.value)"
                                                                     (blur)="loginUser(userName); loginUser.value='' ">
<label class="welcome-content">Password:</label>
<input #userPass type="password" id="txtLoginPassword" (keyup.enter)="loginPass(userPass.value)"
                                                                     (blur)="loginPass(userPass); loginPass.value='' ">
<button class="linkButton welcome-content"  id="lnkLogin" (click)="loginUser(userName.value); loginPass(userPass.value)">Login</button>

还有一个控制器：

userName: string = null;
userPass: string = null;

loginUser(userName): void {
    this.userName = userName;
    console.log(this.userName);
  }

  loginPass(userPass): void {
    this.userPass = userPass;
    console.log(this.userPass);
  }

当我点击按钮时，工作罚款，但是当我在用户字段中按Enter键时，我得到两次用户名输出，如果我在密码字段中按Enter键，则输入相同的密码。我该怎么做才能只输入一次值？

Answer 1

这里的代码：

<input #userName type="text" id="txtLoginUsername" 
     (keyup.enter)="loginUser(userName.value)"
     (blur)="loginUser(userName); loginUser.value='' ">

在查看提供的代码时，我假设您真的只想在用户单击“登录”按钮时将用户登录。所以loginUser方法应该从BOTH输入框中删除。

<label class="welcome-content">Username:</label>
<input #userName type="text" id="txtLoginUsername" >
<label class="welcome-content">Password:</label>
<input #userPass type="password" id="txtLoginPassword">

使用Angular表单输入时，密码或用户名输入两次

1 个答案: