Angular 使用角形窗体按enter键时输入两次密码或用户名

我正在和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>

当我点击按钮时，一切正常，但当我在用户字段中按enter键时，我会得到两次用户名输出，如果我在密码字段中按enter键，密码也是如此。如何使值只输入一次？

此处的代码：

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

---

那为什么要我把这两个都放进去我想当字段中没有输入时我需要模糊，这样我就不会得到空白值了？我真的希望他们也能通过按enter键进行输入，这是可能的。好的。非常感谢。那么流程应该如何工作呢？用户不能只输入用户名然后登录，对吗？他们需要输入用户名和密码吗？那么在这种情况下，回车/模糊应该如何流动呢？哦！我刚注意到！是的，我对其进行了更改，因此只有密码字段允许使用enter键输入，但密码仍然加倍。我花了更多时间处理文档示例，看起来enter键不会将用户移出该字段，因此不会在输入后生成模糊。这就是你在申请表中看到的吗？或者回车键是否会将用户移出该字段？

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

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