輸入類型數字“僅數值”驗證

Question

我如何驗證type="number"的輸入僅在值為數字或 null 時才有效，僅使用 Reactive Forms （無指令） ？
只有數字[0-9]和。 是允許的，沒有“e”或任何其他字符。

---

到目前為止我已經嘗試過：

模板：

<form [formGroup]="form" novalidate>
    <input type="number" formControlName="number" id="number">
</form>

成分：

export class App {
  form: FormGroup = new FormGroup({});

  constructor(
    private fb: FormBuilder,
  ) {
    this.form = fb.group({
      number: ['', [CustomValidator.numeric]]
    })
  }
}

自定義驗證器：

export class CustomValidator{
  // Number only validation
  static numeric(control: AbstractControl) {
    let val = control.value;

    if (val === null || val === '') return null;

    if (!val.toString().match(/^[0-9]+(\.?[0-9]+)?$/)) return { 'invalidNumber': true };

    return null;
  }
}

笨蛋

問題是當用戶輸入的不是數字（“123e”或“abc”）時，FormControl 的值變為null ，請記住我不希望該字段是必需的，所以如果該字段確實為空null值應該是有效的。

跨瀏覽器支持也很重要（Chrome 的數字輸入字段不允許用戶輸入字母 - 除了“e”，但 FireFox 和 Safari 可以）。

Answer 1

如何僅使用響應式表單（無指令）驗證type="number"或數字為null的輸入是否有效？
僅數字[0-9]和。 允許，不能包含“ e”或任何其他字符。

---

到目前為止，我已經嘗試過：

模板：

<form [formGroup]="form" novalidate>
    <input type="number" formControlName="number" id="number">
</form>

成分：

export class App {
  form: FormGroup = new FormGroup({});

  constructor(
    private fb: FormBuilder,
  ) {
    this.form = fb.group({
      number: ['', [CustomValidator.numeric]]
    })
  }
}

CustomValidator：

export class CustomValidator{
  // Number only validation
  static numeric(control: AbstractControl) {
    let val = control.value;

    if (val === null || val === '') return null;

    if (!val.toString().match(/^[0-9]+(\.?[0-9]+)?$/)) return { 'invalidNumber': true };

    return null;
  }
}

柱塞

問題是當用戶輸入的不是數字（“ 123e”或“ abc”）時，FormControl的值變為null ，請記住，我不希望該字段為必填字段，因此，如果該字段確實為空null值應該是有效的。

跨瀏覽器支持也很重要（Chrome的數字輸入字段不允許用戶輸入字母-除“ e”外，但FireFox和Safari可以）。

Answer 2

IMO 最可靠和通用的方法是檢查該值是否可以轉換為數字。 為此添加一個驗證器：

numberValidator(control: FormControl) {
  if (isNaN(control?.value)) {
    return {
      number: true
    }
  }
  return null;
}

export class App {
  form: FormGroup = new FormGroup({});

  constructor(
    private fb: FormBuilder,
  ) {
    this.form = fb.group({
      number: ['', [numberValidator]]
    })
  }
 }

您可以將它與Validators.min和/或Validators.max結合使用以進一步限制可接受的值。

Answer 3

如何僅使用響應式表單（無指令）驗證type="number"或數字為null的輸入是否有效？
僅數字[0-9]和。 允許，不能包含“ e”或任何其他字符。

---

到目前為止，我已經嘗試過：

模板：

<form [formGroup]="form" novalidate>
    <input type="number" formControlName="number" id="number">
</form>

成分：

export class App {
  form: FormGroup = new FormGroup({});

  constructor(
    private fb: FormBuilder,
  ) {
    this.form = fb.group({
      number: ['', [CustomValidator.numeric]]
    })
  }
}

CustomValidator：

export class CustomValidator{
  // Number only validation
  static numeric(control: AbstractControl) {
    let val = control.value;

    if (val === null || val === '') return null;

    if (!val.toString().match(/^[0-9]+(\.?[0-9]+)?$/)) return { 'invalidNumber': true };

    return null;
  }
}

柱塞

問題是當用戶輸入的不是數字（“ 123e”或“ abc”）時，FormControl的值變為null ，請記住，我不希望該字段為必填字段，因此，如果該字段確實為空null值應該是有效的。

跨瀏覽器支持也很重要（Chrome的數字輸入字段不允許用戶輸入字母-除“ e”外，但FireFox和Safari可以）。

Answer 4

如何僅使用響應式表單（無指令）驗證type="number"或數字為null的輸入是否有效？
僅數字[0-9]和。 允許，不能包含“ e”或任何其他字符。

---

到目前為止，我已經嘗試過：

模板：

<form [formGroup]="form" novalidate>
    <input type="number" formControlName="number" id="number">
</form>

成分：

export class App {
  form: FormGroup = new FormGroup({});

  constructor(
    private fb: FormBuilder,
  ) {
    this.form = fb.group({
      number: ['', [CustomValidator.numeric]]
    })
  }
}

CustomValidator：

export class CustomValidator{
  // Number only validation
  static numeric(control: AbstractControl) {
    let val = control.value;

    if (val === null || val === '') return null;

    if (!val.toString().match(/^[0-9]+(\.?[0-9]+)?$/)) return { 'invalidNumber': true };

    return null;
  }
}

柱塞

問題是當用戶輸入的不是數字（“ 123e”或“ abc”）時，FormControl的值變為null ，請記住，我不希望該字段為必填字段，因此，如果該字段確實為空null值應該是有效的。

跨瀏覽器支持也很重要（Chrome的數字輸入字段不允許用戶輸入字母-除“ e”外，但FireFox和Safari可以）。

Answer 5

如何僅使用響應式表單（無指令）驗證type="number"或數字為null的輸入是否有效？
僅數字[0-9]和。 允許，不能包含“ e”或任何其他字符。

---

到目前為止，我已經嘗試過：

模板：

<form [formGroup]="form" novalidate>
    <input type="number" formControlName="number" id="number">
</form>

成分：

export class App {
  form: FormGroup = new FormGroup({});

  constructor(
    private fb: FormBuilder,
  ) {
    this.form = fb.group({
      number: ['', [CustomValidator.numeric]]
    })
  }
}

CustomValidator：

export class CustomValidator{
  // Number only validation
  static numeric(control: AbstractControl) {
    let val = control.value;

    if (val === null || val === '') return null;

    if (!val.toString().match(/^[0-9]+(\.?[0-9]+)?$/)) return { 'invalidNumber': true };

    return null;
  }
}

柱塞

問題是當用戶輸入的不是數字（“ 123e”或“ abc”）時，FormControl的值變為null ，請記住，我不希望該字段為必填字段，因此，如果該字段確實為空null值應該是有效的。

跨瀏覽器支持也很重要（Chrome的數字輸入字段不允許用戶輸入字母-除“ e”外，但FireFox和Safari可以）。

Answer 6

嘗試輸入最小輸入並只允許從 0 到 9 的數字。這在 Angular Cli 中對我有用

<input type="number" oninput="this.value=this.value.replace(/[^\d]/,'')"  min=0>

Answer 7

進行數字驗證的最簡單和最有效的方法是（它也會限制空格和特殊字符）

如果你不想限制長度，你可以刪除 maxlength 屬性

HTML

<input type="text" maxlength="3" (keypress)="validateNo($event)"/>

TS

validateNo(e): boolean {
    const charCode = e.which ? e.which : e.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
      return false
    }
    return true
}

Answer 8

如何僅使用響應式表單（無指令）驗證type="number"或數字為null的輸入是否有效？
僅數字[0-9]和。 允許，不能包含“ e”或任何其他字符。

---

到目前為止，我已經嘗試過：

模板：

<form [formGroup]="form" novalidate>
    <input type="number" formControlName="number" id="number">
</form>

成分：

export class App {
  form: FormGroup = new FormGroup({});

  constructor(
    private fb: FormBuilder,
  ) {
    this.form = fb.group({
      number: ['', [CustomValidator.numeric]]
    })
  }
}

CustomValidator：

export class CustomValidator{
  // Number only validation
  static numeric(control: AbstractControl) {
    let val = control.value;

    if (val === null || val === '') return null;

    if (!val.toString().match(/^[0-9]+(\.?[0-9]+)?$/)) return { 'invalidNumber': true };

    return null;
  }
}

柱塞

問題是當用戶輸入的不是數字（“ 123e”或“ abc”）時，FormControl的值變為null ，請記住，我不希望該字段為必填字段，因此，如果該字段確實為空null值應該是有效的。

跨瀏覽器支持也很重要（Chrome的數字輸入字段不允許用戶輸入字母-除“ e”外，但FireFox和Safari可以）。

Answer 9

如何僅使用響應式表單（無指令）驗證type="number"或數字為null的輸入是否有效？
僅數字[0-9]和。 允許，不能包含“ e”或任何其他字符。

---

到目前為止，我已經嘗試過：

模板：

<form [formGroup]="form" novalidate>
    <input type="number" formControlName="number" id="number">
</form>

成分：

export class App {
  form: FormGroup = new FormGroup({});

  constructor(
    private fb: FormBuilder,
  ) {
    this.form = fb.group({
      number: ['', [CustomValidator.numeric]]
    })
  }
}

CustomValidator：

export class CustomValidator{
  // Number only validation
  static numeric(control: AbstractControl) {
    let val = control.value;

    if (val === null || val === '') return null;

    if (!val.toString().match(/^[0-9]+(\.?[0-9]+)?$/)) return { 'invalidNumber': true };

    return null;
  }
}

柱塞

問題是當用戶輸入的不是數字（“ 123e”或“ abc”）時，FormControl的值變為null ，請記住，我不希望該字段為必填字段，因此，如果該字段確實為空null值應該是有效的。

跨瀏覽器支持也很重要（Chrome的數字輸入字段不允許用戶輸入字母-除“ e”外，但FireFox和Safari可以）。