在输入类型=数字中输入点或e时显示验证错误

Question

我有一个百分比字段的输入类型=数字。我只希望用户输入 0 到 100 之间的数字。我想禁止任何小数值，例如 50.25、60.2、70.0。我还想禁止使用任何指数，例如 2e1、1e2。

我尝试创建自定义验证器，但 Angular 将 10.0 转换为 10，将 2e1 转换为 20，因此我无法验证 control.value。

Answer 1

限制用户的输入，这样就不会出现这个问题，同时添加

Validators.max

和

Validators.min

以在超出限制时显示错误！

import { JsonPipe } from '@angular/common';
import { Component } from '@angular/core';
import {
  FormControl,
  FormGroup,
  FormsModule,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, ReactiveFormsModule, JsonPipe],
  template: `
  <form [formGroup]="formGroup">
    <input name="num"  id="num" formControlName="num"
      type="number"
      min="1"
      max="100"
      step="1"
      onkeypress="return event.charCode >= 48 && event.charCode <= 57"
      title="Numbers only">
      {{formGroup.controls['num'].errors | json}}
</form>
  `,
})
export class App {
  name = 'Angular';
  formGroup: FormGroup<any> = new FormGroup({});

  ngOnInit() {
    this.formGroup = new FormGroup({
      num: new FormControl(1, [Validators.min(1), Validators.max(100)]),
    });
  }
}

bootstrapApplication(App);

堆栈闪电战