如何在 Angular 中使用模板驱动的表单验证数字字段？

Question

有没有办法在 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 属性在我使用侧面的小箭头（由浏览器自动放置在那里）来增加/减少值时确实起到了作用，但是问题是当我手动输入一个值时，字段值可以是我想要的任何值，它不会显示为无效。

感谢您阅读本文并提出任何想法。

Answer 1

我最终找到了问题的答案。所以，我使用了一个自定义指令来检查该字段的值是否是我想要的。

这篇文章解释的很好：https://www.digitalocean.com/community/tutorials/angular-custom-validation