Angular 如何为每个动态生成的表单字段创建单独的验证器？

我的密码是

用户可以单击“添加操作手册”按钮添加一行，用于输入每个手册的数据

但是，如果用户添加了多个手册，验证程序将无法独立工作

例如：

当用户单击“保存”按钮时，用户不在第1行输入任何数据，在第2行输入所有数据

错误消息显示在两行中

我怎样才能解决这个问题

我不知道如何用合适的技术术语来描述这种情况，所以请原谅。

我将

name=“manualLocation”

替换为

name=“manualLocation{{{I}}}

，现在它正在工作。。似乎名称必须是唯一的。您需要对其他输入执行相同的操作

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

操作手册（可选）：
添加操作手册
人工定位