HTML 表单中的 onsubmit 函数在角度组件中无法正常工作

Question

我打开了一个新的 Angular 应用程序，并删除了 app.component.html 中的所有内容，以便我可以尝试编写一些基本的 HTML，但我从 W3schools 复制的简单 HTML 表单不起作用。当您按下“提交”按钮时，它不会弹出警报，而只会刷新页面。

我在网上寻找解决方案，包括编写“return myFunction()”而不是“myFunction()”，但这没有什么区别。我正计划编写自己的函数，该函数将在提交表单时修改页面的innerHTML，但我什至无法通过在其他地方工作的代码显示此警报。

我做错了什么？

这是代码 - 我所做的就是删除表单的 action 属性，该属性最初就在那里

<form onsubmit="myFunction()">
  Enter name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

<script>
function myFunction() {
  alert("The form was submitted");
}
</script>

Answer 1

你没有做错任何事，但是在使用 Angular 表单时需要记住一些事情。

首先，Angular 使用不同的语法来绑定表单事件。您应该使用 Angular

onsubmit

 指令，而不是使用 HTML 

(ngSubmit)

 属性。这将确保 Angular 表单绑定系统了解该事件并可以触发适当的代码。

其次，Angular 表单默认是异步的。这意味着当你提交表单时，Angular 会验证表单，然后在后台将表单数据发送到服务器。如果表单数据有效，Angular 将调用您指定的

onSubmit()

 方法。

为了防止提交表单时页面刷新，需要调用事件对象的

preventDefault()

 方法。这将阻止浏览器向服务器提交表单。

以下是如何修复代码的示例：

<form (ngSubmit)="myFunction()">
  Enter name: <input type="text" name="fname">
  <input type="submit" value="Submit">
</form>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor() { }

  ngOnInit() { }

  myFunction(event: Event) {
    event.preventDefault();
    alert("The form was submitted");
  }
}

现在，当您提交表单时，您应该会看到一个警告框，其中显示消息“表单已提交”。