Angular reactive form validation for dynamic field during submit

I am using the reactive form with dynamic field (productname). I can throw validation error if the form is submitted without filling the product name.

But when I clicked the Add button, the error "Enter Product Name" is appearing for every new inputs (formControlName="productname").
Also I given the stackblitz link
Please someone provide solution

https://stackblitz.com/github/reegan2024/mygithubrepo?file=src%2Fapp%2Fapp.component.html

>Solution :

When you submit, to show all the errors, use the method markAllAsTouched.

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

Since you want the error message to show only when the input is touched, you can fine tune the *ngIf to show only when it is touched this get’s rid of the complexity of checking form submitted and reduces the amount of HTML code, for more readability.

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

Stackblitz Demo