在輸入文本框 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