Angular 中的输入控制：未检测到无效输入

Question

我正在为我的客户端应用程序使用 Angular 8。 当用户插入错误的输入时，我希望在用户的输入框下显示一条错误消息。我在我的 HTML 中使用它：

  <!-- Score input -->
  <div class="form-group">
    <label for="score">Score</label>
    <input type="number" class="form-control"
           placeholder="0.0 ÷ 10.0"
           min="0.0" max="10.0" step="0.1" name="score"
           id="score"
           [(ngModel)]="model.score"
           #score="ngModel">
    <div [hidden]="score.valid" class="alert alert-danger">
      Insert a value between 0.0 and 10.0
    </div>
  </div>

如果用户输入“asdf”而不是“6.7”之类的数字，我希望它会显示出来。但它永远不会出现。我尝试删除 [hidden]="score.valid" 并正确显示。即使我设置了所有这些属性，为什么 Angular 仍将“asdf”视为有效输入：type="number" min="0.0" max="10.0" step="0.1"？

Answer 1

数字类型的输入字段允许用户输入不属于数字的字符。详情请见here。

我看不到您如何处理设置score.valid 变量的值。但是，它可以通过使用 CSS 伪类来实现。

input:invalid+span:after {
  content: 'Insert a value between 0.0 and 10.0';
  padding-left: 5px;
}

<!-- Score input -->
<div class="form-group">
  <label for="score">Score</label>
  <input id="input-validator" type="number" class="form-control"
         placeholder="0.0 ÷ 10.0"
         min="0.0" max="10.0" step="0.1" name="score"
         id="score"
         [(ngModel)]="model.score"
         #score="ngModel">
  <span class="alert alert-danger"></span>
</div>

更新：加入“提交”按钮。

模板：

<form  #scoreValue="ngForm" (ngSubmit)="submitScore(scoreValue.value)">

  <label>Score: </label>
  <input type="number" class="form-control" (keyup)="onKeyUp($event)" 
    placeholder="0.0 ÷ 10.0"
    [min]="min" [max]="max" [step]="step" name="score"
    id="score"
    [(ngModel)]="score"/>
  <span class="alert alert-danger"></span>
  <br /><br />
  <span> Does not work as expected -> </span>
  <button [disabled]="scoreValue.invalid">Submit</button>
  <br /><br />
  <span> Works as expected -> </span>
  <button [disabled]="disableSubmit">Submit</button>

</form>

组件：

public onKeyUp(event){
  let score = event.currentTarget.value;
  if ((score === '') || ((score.split('.')[1] || []).length > 1)) {
    this.disableSubmit = true;
  } else {
    score = Number(score);
    if ((score >= this.min) && (score <= this.max)) {
      this.disableSubmit = false;
    } else {
      this.disableSubmit = true;
    }
  }
}

工作示例：Stackblitz

min 和 max 属性仅设置步进箭头的最小值和最大值。这就是scoreValue.invalid 无法按预期工作的原因。

Answer 2

为什么让浏览器决定行为？
使用指令

<input appDecimalOnly />

/**
 * Credit: omeralper stackoverflow user
 * https://stackoverflow.com/questions/41465542/angular2-input-field-to-accept-only-numbers
 */
@Directive({
  selector: "[appDecimalOnly]"
})
export class DecimalOnlyDirective {
  constructor(private el: ElementRef) {}

  @HostListener("keydown", ["$event"]) onKeyDown(event) {
    let e = <KeyboardEvent>event;

    // console.log(e.keyCode)

    if (
      [46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
      // Allow: Ctrl+A
      (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+C
      (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+V
      (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+X
      (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
      // Allow: home, end, left, right
      (e.keyCode >= 35 && e.keyCode <= 39)
    ) {
      // let it happen, don't do anything
      return;
    }
    // Ensure that it is a number and stop the keypress
    if (
      (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) &&
      (e.keyCode < 96 || e.keyCode > 105)
    ) {
      e.preventDefault();
    }
  }
}

Stackblitz

Answer 3

为了更好的验证，你必须在 .ts 文件中使用 FormControl，你也可以看看官方文档https://angular.io/guide/form-validation。

FormControl 比 ngModel 更灵活——值得一试：）

scoreControl = new FormControl('',
 Validators.compose([
   Validators.required,
   Validators.pattern('^[0-9]*$'),
   Validators.max(10)
 ])
);

并用它修改您的模板：

  <div class="form-group">
    <label for="score">Score</label>
    <input type="number" class="form-control"
           placeholder="0.0 ÷ 10.0"
           min="0.0" max="10.0" step="0.1" name="score"
           id="score"
           [formControl]="scoreControl">

    <div *ngIf="score.invalid" class="alert alert-danger">
      Insert a value between 0.0 and 10.0
    </div>

   </div>

仅关于数字输入，您可以在此处查看： https://stackoverflow.com/a/41479077/9178709

最好的方法是使用指令