如何为每个动态生成的表单字段制作单独的验证器？

Question

我的密码是here.

用户可以点击"Add Operation Manual"按钮为每个手册添加一行来输入数据。

但是，如果用户添加超过 1 个手册，验证器将无法独立工作。

例如：

当用户点击 "save" 按钮时，用户没有在第 1 行输入任何数据，而是在第 2 行输入所有数据，

错误消息显示在两行中。

我该如何解决这个问题？

我不知道如何用合适的专业术语来描述这种情况，请见谅。

Answer 1

我用 name="manualLocation{{i}}" 替换了 name="manualLocation"，现在可以使用了。似乎名称必须是唯一的。您需要对其他输入执行相同的操作。

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

如何为每个动态生成的表单字段制作单独的验证器？

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

angular

angular-forms