时间戳

首页 > 解决方案 > 角度6中表内许多输入的mat-error问题

angular - 角度6中表内许多输入的mat-error问题

问题描述

我有一个内置 angular 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>

我正在使用材料设计

标签： angularangular6

解决方案

您可以通过这种方式尝试您的代码。如果您使用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>

推荐阅读