在输入文本框 Angular8 的第一个数字处限制 0

Question

如何在接受数字的输入文本框中将第一位数字限制为 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>

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

感谢帮助。

Answer 1

使用响应式表单和带有响应式表单的自定义验证器并检查更改时的值。 这将在处理表单时提供更多控制。 当输入以 0 开头或不是数字时，下面的代码显示了两个不同的错误，它还将禁用表单submit按钮任何无效输入。

要填充输入中的数据，您可以像在populateValue函数中一样使用setValue

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;
  }
}

<form [formGroup]="myForm">
  <div>
    <input formControlName='myInput'>
    <div *ngIf="myForm.controls.myInput.errors">
      {{myForm.controls.myInput.errors.message}}
    </div>
  </div>
  <button type='submit' [disabled]="myForm.invalid">
 Submit</button>

</form>

Stackblitz 演示

Answer 2

请使用以下模式

[1-9][0-9]*

示例代码

 <!DOCTYPE html> <html> <body> Only numbers not starting with zero allowed.<br> <input type="text" pattern="^[1-9][0-9]*$" required oninput="if(!this.value.match('^[1-9][0-9]*$'))this.value='';"></input> </body> </html>

在输入文本框 Angular8 的第一个数字处限制 0

问题描述

2 个解决方案

解决方案1
1 2020-09-04 05:53:05

解决方案2
1 已采纳 2020-09-04 05:57:35

在输入文本框 Angular8 的第一个数字处限制 0

问题描述

2 个解决方案

解决方案1 1 2020-09-04 05:53:05

解决方案2 1 已采纳 2020-09-04 05:57:35

解决方案1
1 2020-09-04 05:53:05

解决方案2
1 已采纳 2020-09-04 05:57:35