主页 / coding / 问题 / 79090553
Accepted
Reegan
Asked: 2024-10-15 23:01:24 +0800 CST

提交期间动态字段的角度反应表单验证

  • 772

我正在使用带有动态字段（产品名称）的反应式表单。如果提交表单时未填写产品名称，则可能会引发验证错误。

但是当我单击“添加”按钮时，每次输入新内容时都会出现“输入产品名称”错误（formControlName="productname"）。我还提供了 stackblitz 链接，请有人提供解决方案 https://stackblitz.com/github/reegan2024/mygithubrepo?file=src%2Fapp%2Fapp.component.html在此处输入图片描述

angular

1 个回答

  1. Best Answer

    提交时，若要显示所有错误，请使用方法markAllAsTouched。

    onSubmit(formvalue: boolean) {
  this.productFormarray.markAllAsTouched();
  if (formvalue == true) {
    this.openDialog();
  }
}

    由于您希望仅在触摸输入时显示错误消息，因此您可以对其进行微调，使其*ngIf仅在触摸时显示，这样可以消除检查表单的复杂性submitted并减少 HTML 代码量，从而提高可读性。

        <div
      *ngIf="productdetailsarray.at(i).get('productname')?.touched"
      style="font-size: 10pt; margin-top: 2pt; color:red;"
    >
      ...
    </div>

    Stackblitz 演示

    • 1

相关问题