Угловой 7 - Проверка входов, которые генерируются в цикле - PullRequest
0 голосов
/ 14 ноября 2018

для проекта, над которым мы работаем.Мы используем Angular 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. Заранее спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...