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

如何解决在输入文本框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;
  }
}

<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

请使用以下模式

[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

如何解决在输入文本框Angular8的第一位限制0

解决方法

相关推荐