避免在按钮点击时使用 Angular2 来系统地提交表单。

20 浏览
0 Comments

避免在按钮点击时使用 Angular2 来系统地提交表单。

或许这个不太清楚。获取这个表单：\n

\n为什么所有的按钮都会触发 submit() 函数？如何避免这种情况发生？

0

3 答案

0 Comments

避免在Angular2中在按钮点击时系统地提交表单的问题的出现的原因是没有正确导入FormsModule。解决方法是在app.module.ts文件中从'/forms'导入FormsModule，并在imports数组中添加FormsModule。

解决方法代码如下：

import { FormsModule } from '/forms';
@NgModule({
  imports: [
    FormsModule
  ],
})

这是正确的解决方法，其他所有方法都是不必要的且不符合Angular风格的变通方法。完美的Angular方式不能再同意了。

0
0 Comments

问题出现的原因：

在Angular2中，当点击按钮时，表单会被自动提交。但是有时候我们需要阻止表单的默认行为，这就需要手动阻止表单的提交。

解决方法：

在提交按钮的点击事件中调用preventDefault()方法来阻止表单的默认行为。

解决代码示例：

TS:
submit(e){
 e.preventDefault();
}
Template:

在给出的示例中，通过在所有的按钮上定义了`type="button"`来阻止了表单的默认提交行为，从而解决了问题。

0
0 Comments

避免在Angular2中在按钮点击时系统地提交表单

问题原因：在Angular2中，如果没有显式指定按钮的type属性为"button"，则默认为"submit"类型，导致按钮点击时会触发表单的自动提交。

解决方法1：显式指定按钮的type属性为"button"

解决方法2：使用$event.preventDefault()阻止默认的表单提交行为

或者


preview(e){
  e.preventDefault();
  console.log('preview');
}

注意：在这种情况下，如果事件处理程序返回false，则会调用preventDefault()方法。例如，如果要显式调用stopPropagation()方法，则需要在事件处理程序中返回false。

感谢ünter Zöchbauer指出了这个问题！我一开始尝试了return false，但没有起作用：) 可能在绑定表达式中不允许使用return关键字，但最后一个表达式的值会被隐式返回。

使用解决方法2似乎是最好的答案。只需添加type="button"到我的按钮上就解决了问题。

在第二个示例中，方法调用后的逗号似乎是必需的。如果没有它，我会遇到问题，不得不将其保留。

在这种情况下，我需要在这里传递$event：`

`。为什么需要这样做呢？

我不知道W3C的规范中有type=button这个属性。谢谢！

0