I am currently working on a basic username and password form using Angular. Here's the template I have:
<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>
As for the controller:
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);
}
Everything works fine when clicking the button, but pressing enter in the username field results in the username being output twice, and the same occurs for the password field if enter is pressed there. How can I ensure that the values are only input once?