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

Question

How can i restrict first digit as 0 in the input textbox which accepts numbers.如何在接受数字的输入文本框中将第一位数字限制为 0。

for example: Number cannot be like this 012345 Number can be like 123000例如：号码不能像这样 012345 号码可以像 123000

I have used pattern /^0|[^0-9.]/ but its not working in angular reactive forms.我使用了模式 /^0|[^0-9.]/ 但它不能以角度反应形式工作。 My Input textbox control looks like below:我的输入文本框控件如下所示：

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

Any thoughts are highly appreciated.任何想法都受到高度赞赏。

Thanks for help.感谢帮助。

Answer 1

Use Reactive form & a custom validator with reactive form and check the value on change.使用响应式表单和带有响应式表单的自定义验证器并检查更改时的值。 This will give more control in handling the form.这将在处理表单时提供更多控制。 The below code shows two different error when the input starts with 0 or if it is not a number, It will also disable the form submit button any invalid input.当输入以 0 开头或不是数字时，下面的代码显示了两个不同的错误，它还将禁用表单submit按钮任何无效输入。

To populate the data in the input you can use setValue like done in populateValue function要填充输入中的数据，您可以像在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 Demo Stackblitz 演示

Answer 2

Please use below pattern请使用以下模式

[1-9][0-9]*

Sample code示例代码

 <!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