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