在输入文本框 Angular 8 中限制第一个数字为 0

Question

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

例如：号码不能是这样的 012345 数字可以像 123000

我使用了模式 /^0|[^0-9.]/ 但它在 angular 反应形式中不起作用。我的输入文本框控件如下所示：

<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 按钮任何无效输入。

要填充输入中的数据，您可以使用 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;
  }
}

<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

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>

在输入文本框 Angular 8 中限制第一个数字为 0

Restrict 0 at first digit in input textbox Angular8

html

javascript

angular-reactive-forms

angular8

angular9