Question

我们正在研究的项目。我们正在使用角度7和角度材料设计。我们有一个角形材料表，可以在其中动态加载数据。对于每个列，我们定义列名等，如下所示：

<!-- results found for matchday -->
<table mat-table [(dataSource)]="dataSource" class="mat-elevation-z8">

  <!--- Note that these columns can be defined in any order. The actual rendered columns are set as a property on the row definition" -->
  <!-- Speeldag Column -->
  <ng-container matColumnDef="speeldag">
    <th mat-header-cell *matHeaderCellDef> Speeldag </th>
    <td mat-cell *matCellDef="let element"> {{element.speeldag}} </td>
  </ng-container>

  <!-- Datum Column -->
  <ng-container matColumnDef="datum">
    <th mat-header-cell *matHeaderCellDef> Datum </th>
    <td mat-cell *matCellDef="let element"> {{element.datum}} </td>
  </ng-container>

  <!-- Hour Column -->
  <ng-container matColumnDef="uur">
    <th mat-header-cell *matHeaderCellDef> Uur </th>
    <td mat-cell *matCellDef="let element"> {{element.uur}} </td>
  </ng-container>

  <!-- Home Team Column -->
  <ng-container matColumnDef="thuisploeg">
    <th mat-header-cell *matHeaderCellDef> Thuisploeg </th>
    <td mat-cell *matCellDef="let element"> {{element.thuisploeg}} </td>
  </ng-container>

  <!-- Home Team Column -->
  <ng-container matColumnDef="vs">
    <th mat-header-cell *matHeaderCellDef>  </th>
    <td mat-cell *matCellDef="let element"> - </td>
  </ng-container>

  <!-- Away Team Column -->
  <ng-container matColumnDef="uitploeg">
    <th mat-header-cell *matHeaderCellDef> Uitploeg </th>
    <td mat-cell *matCellDef="let element"> {{element.uitploeg}} </td>
  </ng-container>

  <!-- Home Score Column -->
  <ng-container matColumnDef="thuisScore">
    <th mat-header-cell *matHeaderCellDef> Thuis score </th>
    <td mat-cell *matCellDef="let element; let i = index">
      <form *ngIf="element.thuisScore === ''">
        <mat-form-field class="table-input-field">
          <input #Home
                 matInput
                 [formControl]="validateScoreInput"
                 [value]="element.thuisScore"
                 (blur)="blurHomeScore(Home.value, element.thuisploeg, element.uitploeg)"/>
        </mat-form-field>
      </form>
      <span *ngIf="element.thuisScore !== ''">
        {{element.thuisScore}}
      </span>
    </td>
  </ng-container>

  <!-- Away Score Column -->
  <ng-container matColumnDef="uitScore">
    <th mat-header-cell *matHeaderCellDef> Uit score </th>
    <td mat-cell *matCellDef="let element; let i = index">
      <form novalidate *ngIf="element.uitScore === ''">
        <mat-form-field class="table-input-field">
          <input #Away
                 matInput
                 [formControl]="validateScoreInput"
                 [value]="element.uitScore"
                 (blur)="blurAwayScore(Away.value, element.thuisploeg, element.uitploeg)">
        </mat-form-field>
      </form>
      <span *ngIf="element.uitScore !== ''">
        {{element.uitScore}}
      </span>
    </td>
  </ng-container>

  <!-- Referee Column -->
  <ng-container matColumnDef="scheidsrechter">
    <th mat-header-cell *matHeaderCellDef> Scheidsrechter </th>
    <td mat-cell *matCellDef="let element"> {{element.scheidsrechter}} </td>
  </ng-container>

  <!-- Match status Column -->
  <ng-container matColumnDef="matchStatus">
    <th mat-header-cell *matHeaderCellDef> Match status </th>
    <td mat-cell *matCellDef="let element"> {{element.matchStatus}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>

在组件打字稿中，我们使用角度验证器来检查输入字段以进行验证。像这样： this.validateScoreInput = new FormControl('', [Validators.max(8), Validators.min(0), Validators.pattern(/^-?(0|[1-9]\d*)?$/)]);

现在的问题是，我们如何独自正确地验证每个输入，以及是否要检查两个输入的组合值是否大于10。预先感谢！

Angular 7-验证循环中生成的输入

0 个答案: