1

我正在尝试使用模板驱动的表单验证来实现一个新的 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"创建了一个局部变量value，其中包含声明它的输入元素的值，然后允许我value在以下 *ngIf 指令中引用以检查错误。

但是，当输入值超出范围（小于 0，大于 1）时，mat-error 元素永远不会出现，所以我的理解可能是错误的和/或我错误地实现了这一点。

任何解释将不胜感激！

4

0 回答 0