angular input控件输入校验

最新推荐文章于 2023-08-23 15:19:35 发布

Jacky-Liu999

最新推荐文章于 2023-08-23 15:19:35 发布

阅读量1.6k

点赞数

分类专栏： Angular 文章标签： angular ts

本文链接：https://blog.youkuaiyun.com/hotboyboy/article/details/109224248

版权

Angular 专栏收录该内容

25 篇文章

订阅专栏

本文探讨了在Angular中如何实现输入控件的验证，包括禁止输入特定字符（如'-'或'.'）以及创建自定义的数字范围验证器，确保用户只能输入0-9的数字。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

交互1 ：禁止输入-或.

  @ViewChild('rowInput', { static: false }) rowInput: ElementRef;
//如果在ngOnInit不能获取lineInput.nativeElement可以改用ngAfterViewInit钩子函数
    ngOnInit() {
        var lineEle = this.lineInput.nativeElement;
    rowEle.addEventListener("keydown", (e: any) => 	this.onRowKeyDown(e), false);
  }
    onRowKeyDown(event: any) {
    if (event.key == '-' || event.key == '.' || event.key == 'e') {
      event.preventDefault();
      var message = this.ValidationMessages['rowControl'];//错误提示显示
      this.FormErrors['rowControl'] = message['onlyNumber'];
    }
  }

交互2：自定义validator

定义一个只能输入0-9的validator

import {FormControl, ValidatorFn, AbstractControl} from "@angular/forms";
  export function onlyPositiveIntegerCheck(control: FormControl): any {
     if(control.value == null || control.value === ""){
          return null;
       }
     var myreg = /^[0-9]*$/;
     var valid = myreg.test(control.value);
     return valid ? null : { onlyNumber: true };//返回null代表校验通过
   }

2调用

  initFromGroup() {
    this.customLayoutForm = this.fb.group({
      rowControl: ['', [Validators.required, Validators.max(6), Validators.min(1)，onlyPositiveIntegerCheck]],
      lineControl: ['', [Validators.required, Validators.max(6), Validators.min(1)]],
    });
    this.customLayoutForm.controls.rowControl.valueChanges.subscribe((data)=>{this.onValueChanged(data)});
    this.customLayoutForm.controls.lineControl.valueChanges.subscribe((data)=>{this.onValueChanged(data)});
  }

  onValueChanged(data?: any) {
    if (!this.customLayoutForm || !this.customLayoutForm.dirty) {
      return;
    }
    for (const field in this.FormErrors) {
      this.FormErrors[field] = '';
      const control = this.customLayoutForm.get(field);
      if (control && control.dirty && control.invalid) {
        const message = this.ValidationMessages[field];
        for (const key in control.errors) {
          this.FormErrors[field] += message[key] + '';
          break;//取第一个错误
        }
      }
    }
  }
  public ValidationMessages = {
    rowControl: {
      required: "此项为必填项",
      max: "最大值为6",
      min: "最小值为1",
      onlyNumber:"请输入整数"
    },
    lineControl: {
      required: "此项为必填项",
      max: "最大值为6",
      min: "最小值为1",
      onlyNumber:"请输入整数"
    },
  }