Angular：输入时提交的表单不适用于 updateOn：'submit'

Question

我有一个带有 'updateOn: 'submit' 的表单，因为我们只需要在用户提交后进行验证。然而，这导致 enter 上的提交停止工作：它触发了验证，但表现得好像表单中没有值，只显示 Validators.required 消息。当我将表单打印到控制台时，它也将表单视为空。当通过单击提交按钮调用提交时，一切正常。

有没有办法检测按下回车键并以编程方式调用本机提交来触发验证，或者以更智能的方式解决这个问题？

我已经在 Stackblitz 链接上复制了它：https://stackblitz.com/edit/angular-p4p5k9?file=src%2Fapp%2Fapp.component.ts

如何模拟： 1. 在文本字段中输入一个值并点击提交。该值在控制台中看到 2. 在文本字段中输入其他内容，然后按 Enter。新值尚未更新，而是在控制台中看到旧值。

我需要在 enter 时以某种方式调用程序化提交，以便在 enterHit 订阅中调用 submit() 方法时，表单中已经包含新值。

Answer 1

您可以创建一个布尔变量 hasSubmittedOnce 并将其初始值设置为 false，然后在表单提交时将其值更改为 true

private hasSubmittedOnce: boolean = false;

onSubmit() {
 if(!this.hasSubmittedOnce) {
   this.hasSubmittedOnce = true;
 }
}

在更新验证检查后，添加 hasSubmittedOnce 条件，如果 hasSubmittedOnce 为真，则仅验证值并显示错误消息

Answer 2

在你的 ts 文件中取一个变量

isSubmitted:Boolean = false;

并将其赋予特定的验证条件。示例如下

  <div *ngIf="testForm.get('amount').errors && submitted" class="text-danger">
      <div *ngIf="testForm.get('amount').errors.required && submitted" class="fontSize12">Amount is
        required
      </div>
  </div>

你的按钮点击应该是

submitForm(form:FormGroup) {
    this.isSubmitted = true;
}