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

Question

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

但是当我单击“添加”按钮时，每个新输入 (formControlName="productname") 都会出现错误“输入产品名称”。 我还给出了 stackblitz 链接 请有人提供解决方案 https://stackblitz.com/github/reegan2024/mygithubrepo?file=src%2Fapp%2Fapp.component.html

Answer 1

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

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 演示