Angular: Form submit on enter does not work with updateOn: 'submit'
我有一个带有 \\'updateOn: \\'submit\\' 的表单，因为我们只需要在用户提交后进行验证。但是，这导致 enter 上的提交停止工作：它触发了验证，但表现得好像表单中没有值并且只显示 Validators.required 消息。当我将表单打印到控制台时，它也将表单视为空。当通过单击提交按钮调用提交时，一切正常。
有没有办法检测输入键的按下并以编程方式调用本机提交来触发验证，或者以更智能的方式解决这个问题？
我已经在 Stackblitz 链接上复制了它：https://stackblitz.com/edit/angular-p4p5k9?file=src/app/app.component.ts
如何模拟：
1. 在文本字段中输入一个值并点击提交。该值在控制台中看到
2. 在文本字段中输入其他内容，然后按 Enter。新值尚未更新，而是在控制台中看到旧值。
我需要在 enter 时以某种方式调用程序化提交，以便在 enterHit 订阅中调用 submit() 方法时，表单中已经包含新值。
- Patel Rushi 的最后一条评论解决了我的问题。
在你的 ts 文件中取一个变量
1
| isSubmitted:Boolean = false; |
并将其赋予特定的验证条件。示例如下
你的按钮点击应该是
1
2
3
| submitForm(form:FormGroup) {
this.isSubmitted = true;
} |
-
我可能没有很好地描述这个问题。当用户回车时，ts文件看不到表单中写入的值，因为还没有发生原生提交(用户还没有点击提交按钮)
-
尝试添加 <form #yourform ="ngForm" (ngSubmit)="onSubmit()">
-
(ngSubmit) 上的方法 onSubmit() 也仅在单击提交按钮时调用，它对输入命中没有反应。当我尝试添加 #form="ngForm" 时，页面停止工作，看来这段代码不能很好地与现有的 formGroup 实例一起使用
-
哦，有你的问题。您有一个名为自动对焦的问题。生成表单时在任何字段中添加自动对焦，然后按 Enter。愿它帮助stackoverflow.com/questions/42861734/...
-
对不起，我仍然在带领你。我们已经对第一个输入字段进行了自动对焦，即使我们在字段中手动填写数据并按下回车键，提交也不会发生。我们甚至订阅了 enterhit 属性并调用了我们的程序化提交(它会提取数据并且除了提交它还会将它们推送到我们的 rxjs 存储)。我们的 ngSubmit() 也调用了同样的程序化提交。
-
会发生这样的情况： 1.如果用户在我们的表单上的输入字段中输入数据并手动单击提交按钮，this.form.value 将其数据写入其中，并且从 ngSubmit 调用我们的 submit() 方法，将数据放入到我们的商店等等。 2.如果用户在我们的表单的inputfields中输入数据并按下回车，表单不会像按下提交按钮一样注册这个操作，那么我们的"enterhit"订阅就会被触发并调用程序化的submit()，它查看 this.form.value 并看到空值，因为尚未按下提交按钮。
-
stackblitz.com/edit/… 当你写东西并点击提交时，值被写入控制台。当你写别的东西并回车时，旧值仍然写在控制台中
-
(keyup.enter)=\\'$event.target.blur();propagateEnter()\\' 它解决了你的问题
您可以创建一个布尔变量 hasSubmittedOnce 并将其初始值设置为 false 并在表单提交时将其值更改为 true
1
2
3
4
5
6
7
| private hasSubmittedOnce: boolean = false;
onSubmit() {
if(!this.hasSubmittedOnce) {
this.hasSubmittedOnce = true;
}
} |
在更新验证检查之后，添加 hasSubmittedOnce 条件，如果 hasSubmittedOnce 为真，则仅验证值并显示错误消息
- 我可能描述得有点混乱。我有一个问题，除非用户单击提交按钮，否则 ts 文件不知道表单中的任何值并将 this.form.value 视为空，因为它仅在提交按钮单击时更新其值。当用户点击 Enter 键而不是单击按钮时，提交按钮不会做出反应，并且在 Enter 键上触发的验证也会将表单视为空。