Question

我有一个带有'updateOn：'submit'的表格，因为我们只需要在用户提交后进行验证。但是，这导致Enter上的提交停止工作：它触发了验证，但其行为就像表单中没有任何值，并且仅显示Validators.required消息。当我将表格打印到控制台中时，它也看到表格为空。通过单击“提交”按钮调用提交时，一切正常。

是否有办法检测Enter键的按下并以编程方式调用本机提交以触发验证，或者以任何更智能的方式解决此问题？

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

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

我需要以某种方式在enter上调用程序化提交，以便在enterHit订阅中调用commit（）方法时，表单中已经具有新值。

Answer 1

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

private hasSubmittedOnce: boolean = false;

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

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

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;
}

角度：输入时提交表单不适用于updateOn：'submit'

2 个答案: