Javascript 在输入文本框Angular8的第一位限制0

如何将接受数字的输入文本框中的第一个数字限制为0

例如： 数字不能是这样的012345 这个数字可能是123000

我使用过模式/^0 |[^0-9.]/，但它不适用于角度反应形式。 我的输入文本框控件如下所示：

<input type="text" class="form-control" id="inputNumber" formControlName="inputNumber" maxlength="5" minlength ="1" pattern="/^0|[^0-9.]/"   [(ngModel)]="inputNumber"  required>

任何想法都将受到高度赞赏

---

感谢您的帮助。

使用反应式表单&一个带有反应式表单的自定义验证器，并在更改时检查值。这将在处理表单时提供更多控制。当输入以0开头时，下面的代码显示两种不同的错误，或者如果它不是数字，它还将禁用表单

submit

按钮以显示任何无效输入

要填充输入中的数据，可以使用

setValue

类似于

populateValue

函数中的操作

import {
  Component,
  VERSION,
  OnInit
} from "@angular/core";
import {
  FormGroup,
  FormBuilder,
  FormControl,
  AbstractControl,
  ValidationErrors,
  ValidatorFn
} from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      myInput: ["", [this.customValidator]] // custom validator
    });
    this.populateValue();
  }

  populateValue() {
    // use this to populate input with api response
    this.myForm.controls.myInput.setValue("wwedwedwed");
  }

  customValidator(control: AbstractControl): ValidationErrors {
    let error = {
      name: "",
      message: ""
    };
    if (control.value !== "") {
      // this validation will check if the value does not start with 0 or !isNaN
      if (isNaN(control.value)) {
        error.name = "notNumber";
        error.message = "Cannot be a string";
        return error;
      }
      if (control.value.startsWith(0)) {
        {
          error.name = "noZeroStart";
          error.message = "Cannot start with 0";
          return error;
        }
      }
      return null;
    }
    return error;
  }
}

{{myForm.controls.myInput.errors.message}
提交

---

使用反应式表单&带有反应式表单的自定义验证器，并在更改时检查值。这将在处理表单时提供更多控制。当输入以0开头时，下面的代码显示两种不同的错误，或者如果它不是数字，它还将禁用表单

submit

按钮以显示任何无效输入

要填充输入中的数据，可以使用

setValue

类似于

populateValue

函数中的操作

import {
  Component,
  VERSION,
  OnInit
} from "@angular/core";
import {
  FormGroup,
  FormBuilder,
  FormControl,
  AbstractControl,
  ValidationErrors,
  ValidatorFn
} from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      myInput: ["", [this.customValidator]] // custom validator
    });
    this.populateValue();
  }

  populateValue() {
    // use this to populate input with api response
    this.myForm.controls.myInput.setValue("wwedwedwed");
  }

  customValidator(control: AbstractControl): ValidationErrors {
    let error = {
      name: "",
      message: ""
    };
    if (control.value !== "") {
      // this validation will check if the value does not start with 0 or !isNaN
      if (isNaN(control.value)) {
        error.name = "notNumber";
        error.message = "Cannot be a string";
        return error;
      }
      if (control.value.startsWith(0)) {
        {
          error.name = "noZeroStart";
          error.message = "Cannot start with 0";
          return error;
        }
      }
      return null;
    }
    return error;
  }
}

{{myForm.controls.myInput.errors.message}
提交

---

请使用下面的模式

[1-9][0-9]*

示例代码

仅允许不以零开头的数字。

请使用下面的模式

[1-9][0-9]*

示例代码

仅允许不以零开头的数字。

为什么使用

ngModel

当我们使用

formControlName

时，我从数据库中获取值，在文本框中动态显示它。所以我用ngmodel来显示它。如果我想编辑文本框，我的文本框不允许第一个数字为零。为什么使用

ngModel

当我们使用

formControlName

时，我从数据库中获取值以在文本框中动态显示它。所以我用ngmodel来显示它。如果我想编辑文本框，我的文本框不允许第一个数字为零。文本框允许第一个数字为零。因此，这个解决方案与我的问题不符，先生。在运行代码段中，它不起作用。@user1989我已经更新了上面的代码，以检查输入模式。现在试试。Textbox允许第一个数字为零。因此，这个解决方案与我的问题不符，先生。在运行代码段中，它不起作用。@user1989我已经更新了上面的代码，以检查输入模式。现在试试。