How to make individual validator for each dynamic generated form field?

Question

My code is here.

User can click on the "Add Operation Manual" button to add a row for entering the data for each manual.

However, if the user add more than 1 manual, the validators cannot work independently.

For example:

User does not enter any data in row 1 and enter all data in row 2 when the user clicks on "save" button,

the error message is displayed in both rows.

How can I fix the problem?

I don't know how to describe this situation with a suitable technical term, so forgive me, please.

Answer 1

I replaced name="manualLocation" by name="manualLocation{{i}}" and now it is working.. it seems name has to be unique. You need to do the same with other inputs.

    <form #callTreeInfoEditForm="ngForm" (ngSubmit)="onSubmit(callTreeInfoEditForm)" novalidate>
  <table style="width:100%;">
    <tr>
      <td>Operation Manual(Optional):</td>
      <td>
        <button style="float:right" mat-raised-button type="button" color="primary" class="Update-btn" (click)="addManual()">
          Add Operation Manual
        </button>
      </td>
    </tr>
    <tr *ngFor="let manual of manuals; let i = index">
      <td colspan=2>
        <mat-form-field>
          <mat-label>Manual Location</mat-label>
          <input
            matInput
            required
            type="text"
            [(ngModel)]="manual.manualLocation"
            name="manualLocation{{i}}" <--- This Line
            #manualLocationValidator="ngModel">
          <mat-error *ngIf="manualLocationValidator.hasError('required')">
            Manual location is <strong>required</strong>
          </mat-error>
        </mat-form-field>
        <mat-form-field>
          <mat-label>Manual Description</mat-label>
          <input
            matInput
            required
            type="text"
            [(ngModel)]="manual.description"
            name="manualDesc{{i}}" <--- This Line
            #manualDescValidator="ngModel">
          <mat-error *ngIf="manualDescValidator.hasError('required')">
            Manual Description is <strong>required</strong>
          </mat-error>
        </mat-form-field>
        <mat-form-field>
          <mat-label>Last Update Date</mat-label>
          <input
            matInput
            required
            type="text"
            [(ngModel)]="manual.lastUpdateDate"
            name="manualLastUpdateDate{{i}}" <--- This Line
            #manualLastUpdateDateValidator="ngModel">
          <mat-error *ngIf="manualLastUpdateDateValidator.hasError('required')">
            Last Update Date is <strong>required</strong>
          </mat-error>
        </mat-form-field>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button
          style="font-weight: bold;;font-size: 30px;vertical-align: middle;"
          mat-raised-button type="button"
          color="primary"
          class="Update-btn"
          (click)="removeManual(i)">
            -
        </button>
      </td>
  </table>
  <mat-dialog-actions>
    <button mat-raised-button type="submit" color="primary" class="Update-btn">Save</button>
  </mat-dialog-actions>
</form>