响应式表单:在某些控件上用不同的功能替换回车键提交

Reactive Forms: replacing the enter key submit with a different function on some controls

我正在学习响应式表单并编写一个简单的应用程序来帮助我理解。我有几个用于修改 FormGroup 的文本输入,并且有一个按钮可以执行这样做的功能,但我发现我在尝试填写这些字段时不小心按了回车键触发表单提交。我想知道是否有办法阻止回车键的正常提交行为,但只有在某些字段具有焦点时,我想在所有其他情况下保留回车键提交功能而不是完全禁用它。

尝试添加验证,并且仅在表单有效时提交。

这可以通过在 Reactive 表单字段中添加验证来完成。

此外,对于特定字段,您可以监听更改事件/焦点事件并设置一个布尔值以停止表单提交。在提交输入/提交按钮上设置禁用 属性,值为 bool。因此,当特定字段具有焦点/更改事件(无论需要什么功能)时,提交输入/按钮将被禁用。但是,要在字段的模糊(失去焦点)事件 ((blur)="methodhere($event)") 中启用提交输入,将 bool 设置为 false。这将再次启用提交输入。

另一种方式是针对特定字段,可以监听change事件/focus事件,在form submit方法中设置一个bool来停止form进程。即表单将被提交,但不会在表单提交方法中进一步处理。