Question

preventDefault()无法正常工作。当我按下“登录”按钮时，页面会刷新，但是使用preventDefault()时页面不会刷新。

我用stopPropagation()尝试过，但是存在相同的问题。

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>

当我按下“登录”按钮时，loginevent.preventDefault()应该阻止页面重新加载。

Answer 1

您必须将$event作为参数而不是其他任何单词传递。 $event是用于获取事件数据的保留关键字。

Angular Docs的意思是：

框架将事件参数（由$ event表示）传递给处理程序方法，然后该方法对其进行处理：

尝试一下：

<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

我建议您应该使用angular提供的内容，无论是模板驱动形式还是反应形式。我们是用角度编码的，那为什么不用角度编码：）

模板驱动：

<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>

您现在在此处将表单值传递给您的登录名，其中包含您的用户名和密码：

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

有了这个，您甚至不必担心preventDefault()

但是我也建议使用反应方式，详细了解模板驱动形式和反应形式：https://angular.io/guide/forms

preventDefault（）无法正常工作，如何使其正常工作？

2 个答案: