проблема с мат-ошибкой многих входных данных внутри таблицы в угловых 6

Question

У меня есть приложение, встроенное в угловое 6. Я использую много входов внутри таблицы.проблема в том, что когда я использую mat-error, чтобы определить, вводят ли пользователь данные, все входные данные помечаются как необходимые, а когда пользователь вводит данные в один из них, требуемое сообщение исчезает со всех входов

     <ng-container matColumnDef="documents_administrative_orders_num">
              <th class="text-center" mat-header-cell *matHeaderCellDef>{{objLang.arrLang.doc_num}}</th>
              <td mat-cell *matCellDef="let element; let idx = index   ">
                   <!-- {{element.documents_administrative_orders_num}}  -->
                  <mat-form-field dir="ltr" lang="en">
                    <input matInput [formControl]="element.documents_administrative_orders_num"  >
                    <mat-error *ngIf="element.documents_administrative_orders_num.hasError('required')">
                            Field is <strong>required</strong>
                    </mat-error>
                  </mat-form-field>
                </td>
            </ng-container>

Я использую дизайн материала

Answer 1

Вы можете попробовать свой код таким образом.Если вы используете ngModel , вы можете указать ошибку для этого конкретного ввода.

<form class="example-form" #actionGroupMasterForm="ngForm" (ngSubmit)="onSubmit(actionGroupMasterForm)">
   <mat-form-field class="example-full-width">
        <input matInput placeholder="Action Group" name="action group" id="actionGroup" required #actionGroups=ngModel [(ngModel)]="actionGroup">
        <mat-error *ngIf="actionGroups.invalid && (actionGroups.dirty || actionGroups.touched)">
          {{getErrorMessage()}}</mat-error>
   </mat-form-field>
   <mat-form-field class="example-full-width">
        <input matInput placeholder="Action Group Name" name="action group name" id="actionGroupName" required #actionGroupNames=ngModel
          [(ngModel)]="actionGroupName">
        <mat-error *ngIf="actionGroupNames.invalid && (actionGroupNames.dirty || actionGroupNames.touched)">
          {{getErrorMessage()}}</mat-error>
   </mat-form-field>
</form>