The preventDefault() isn't working, how can I make it so, that it works correctly?

Question

The preventDefault() isn't working correctly. When I press the Login button, the page refresh's, but with the preventDefault() it shouldn't.

I tried it with stopPropagation() , but there was the same problem.

TypeScript:

loginUser(loginevent){
  loginevent.preventDefault()
  const target = loginevent.target
  const username = target.getElementById('username')
  const password = target.getElementById('pasword')
  console.log(username, password)
}

HTML:

  <form (submit)="loginUser($loginevent)">
    <input type="text" placeholder="Benutzername" id="username">
    <input type="text" placeholder="Passwort" id="password">
    <input type="submit" value="Login">
  </form>

The loginevent.preventDefault() should prevent the page from reloading it, when I press the Login button.

Answer 1

You'd have to pass $event as an argument and not any other word. $event is a reserved keyword to get the event data.

Here's what the Angular Docs say:

The framework passes the event argument—represented by $event—to the handler method, and the method processes it:

Try this:

<form (submit)="loginUser($event)">
  <input type="text" placeholder="Benutzername" id="username">
  <input type="text" placeholder="Passwort" id="password">
  <input type="submit" value="Login">
</form>

Answer 2

I would suggest you should use what angular has to offer, either a template-driven or reactive form. We are coding with angular, then why not do it the angular way :)

Template driven:

<form #f="ngForm" (ngSubmit)="loginUser(f.value)">
  <input type="text" placeholder="Benutzername" name="username" ngModel>
  <input type="text" placeholder="Passwort" name="password" ngModel>
  <button type="submit">Submit</button>
</form>

Here you now pass the form value to your login, which contains your username and password:

loginUser(values){
  const username = values.username
  const password = values.password
  console.log(username, password)
}

With this, you don't even need to worry about preventDefault()

But I would also recommend the reactive way, read more about both template-driven and reactive forms: https://angular.io/guide/forms