有没有一种方法可以在Angular 11中使用模板驱动的表单来验证输入字段的数值？
为了提供一些上下文，我正在使用Angular 11构建一个存储卡游戏，我想确保玩家不能选择低于卡数的maxFlipCount。我一直在努力使用输入标记上的min属性来实现这一点。也许还有一个我不知道的不使用min属性。
我怎样才能做到这一点？
我正在尝试将此验证应用于模板代码中提交按钮之前的最后一个输入标记。到目前为止，我已经做到了：
<form #gameOptionsForm="ngForm" (ngSubmit)="startGame()" novalidate>
<!-- mode de jeu -->
<div class="field">
<label class="label">Mode de jeu</label>
<div class="control">
<div class="select" [class.is-danger]="
gameMode.invalid && (gameMode.dirty || gameMode.touched)
">
<select name="gameMode" [(ngModel)]="optionsForm.gameMode" #gameMode="ngModel" required>
<option value="1">1 joueur</option>
<option value="2">2 joueurs</option>
</select>
</div>
</div>
<p class="help is-danger" *ngIf="gameMode.invalid && (gameMode.dirty || gameMode.touched)">
Vous devez choisir un mode jeu
</p>
</div>
<!-- nom du premier joueur -->
<div class="field" *ngIf="optionsForm.gameMode == 1 || optionsForm.gameMode == 2">
<label class="label">Nom du joueur 1</label>
<div class="control">
<input [class.is-danger]="
player1.invalid && (player1.dirty || player1.touched)
" class="input" type="text" name="player1" placeholder="Joueur 1" #player1="ngModel" [(ngModel)]="optionsForm.player1" required />
</div>
<p class="help is-danger" *ngIf="player1.invalid && (player1.dirty || player1.touched)">
Veuillez entrer un nom pour le joueur 1
</p>
</div>
<!-- nom du deuxieme joueur -->
<div class="field" *ngIf="optionsForm.gameMode == 2">
<label class="label">Nom du joueur 2</label>
<div class="control">
<input [class.is-danger]="
player2.invalid && (player2.dirty || player2.touched)
" class="input" type="text" name="player2" placeholder="Joueur 2" #player2="ngModel" [(ngModel)]="optionsForm.player2" required />
</div>
<p class="help is-danger" *ngIf="player2.invalid && (player2.dirty || player2.touched)">
Veuillez entrer un nom pour le joueur 2
</p>
</div>
<!-- taille de la grille -->
<div class="field">
<label class="label">Nombre de cartes</label>
<div class="control">
<div class="select" [class.is-danger]="
gridSize.invalid && (gridSize.dirty || gridSize.touched)
">
<select name="gridSize" [(ngModel)]="optionsForm.gridSize" #gridSize="ngModel" required>
<option value="4">4</option>
<option value="16">16</option>
<option value="36">36</option>
</select>
</div>
</div>
<p class="help is-danger" *ngIf="gridSize.invalid && (gridSize.dirty || gridSize.touched)">
Vous devez choisir un nombre de cartes
</p>
</div>
<!-- nombre maximal de coups -->
<div class="field">
<label class="label">Nombre maximal de coups</label>
<div class="control">
<input [class.is-danger]="
maxFlipCount.invalid && (maxFlipCount.dirty || maxFlipCount.touched)
" class="input" type="number" name="maxFlipCount" #maxFlipCount="ngModel" [(ngModel)]="optionsForm.maxFlipCount" required min="{{ optionsForm.gridSize }}" />
</div>
<p class="help is-danger" *ngIf="
maxFlipCount.invalid &&
(maxFlipCount.dirty || maxFlipCount.touched) &&
maxFlipCount.errors.required
">
Veuillez entrer un nombre maximal de coups
</p>
<p class="help is-danger" *ngIf="maxFlipCount.errors?.min">
Veuillez entrer un nombre supérieur ou égal à {{ optionsForm.gridSize }}
</p>
</div>
<button type="submit" [disabled]="!gameOptionsForm.form.valid">
Commencer
</button>
</form>当我使用侧面的小箭头(由浏览器自动放在那里(来增加/减少值时，min属性实际上起到了它的作用，但问题是，当我手动键入值时，字段值可以是我想要的任何值，并且不会显示为无效。
感谢您通读并提出任何想法。
我终于找到了问题的答案。因此，我使用了一个自定义指令来检查字段的值是否符合我的要求。
这篇文章很好地解释了这一点：https://www.digitalocean.com/community/tutorials/angular-custom-validation