html - 最小/最大のAngular2テンプレート駆動型フォーム検証を正しく設定するには?

Question

テンプレート駆動のフォーム検証を使用して、新しい Angular コンポーネントを実装しようとしています。ここのドキュメントに従っていますが、結果を再現できないようです。具体的には、入力が無効な場合、エラーを示す div は表示されません。

コンテキストのソース コードは次のとおりです。

テンプレート：

<mat-form-field class="input">
  <input matInput matTooltip="Float value between 0.0 and 1.0"
         type="number"
         placeholder="Confidence"
         min="0.0"
         max="1.0"
         [(ngModel)]="confidence"
         #value="ngModel">
  <mat-error *ngIf="value.invalid &&  (value.errors.min || value.errors.max)">
    Confidence must be an decimal value between 0.0 and 1.0.
  </mat-error>
</mat-form-field>

関連するコンポーネント コード:

  metadata = {confidence: 0.0, ...};

  get confidence(): number {
    return this.metadata.confidence;
  }

  set confidence(confidenceIn: number) {
    this.metadata.confidence = confidenceIn;
  }

私の理解では、行は、それが宣言された入力要素の値を含む#value="ngModel"ローカル変数を作成し、次の *ngIf ディレクティブのように参照してエラーをチェックできるようになります。valuevalue

ただし、入力値が範囲外 (0 未満、1 より大きい) の場合、mat-error 要素は表示されないため、私の理解が間違っているか、これを正しく実装していない可能性があります。

どんな説明でも大歓迎です！