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

Question

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

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

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

如何模拟： 1. 在文本字段中键入一个值并点击提交。该值在控制台中可见 2. 在文本字段中输入其他内容，然后按回车键。新值未更新，旧值显示在控制台中。

我需要以某种方式在输入时调用编程提交，以便在 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;

并将其提供给特定的验证 condition.Example，如下所示

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

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

Angular: Form submit on enter does not work with updateOn: 'submit'

forms

validation

angular

formgroups