angular 表单验证

最新推荐文章于 2025-05-12 15:29:56 发布

原创最新推荐文章于 2025-05-12 15:29:56 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

技术分享专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了一个使用Angular框架进行表单验证的实际案例，包括如何设置表单控件、使用正则表达式校验输入、以及如何在用户交互时显示错误信息。通过具体的HTML和TypeScript代码示例，展示了如何创建一个具有Mid和IMEI字段的表单，这两个字段都有各自的验证规则，如必填项检查、最小长度限制和特定的数字模式。

1.html

<form [formGroup]="myGroup1">
    <div class="form-group">
      <label for="name">Mid</label>
      <input id="Mid" class="form-control" formControlName="Mid" required />
      <div *ngIf="Mid.invalid && (Mid.dirty || Mid.touched)" class="alert alert-danger">
        <div *ngIf="Mid.errors.required" class="red">
          Mid 是必填项！
        </div>
        <div *ngIf="Mid.errors.minlength" class="red">
          Mid 必须是十位纯数字！
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="name">IMEI</label>
      <input id="IMEI" class="form-control" formControlName="IMEI" required />
      <div *ngIf="IMEI.invalid && (IMEI.dirty || IMEI.touched)" class="alert alert-danger">
        <div *ngIf="IMEI.errors.required" class="red">
          IMEI 是必填项！
        </div>
        <div *ngIf="IMEI.errors.minlength || IMEI.errors.pattern " class="red">
          IMEI 必须是15位纯数字！
        </div>
      </div>
    </div>
  </form>

2.初始化表单

Validators.pattern(/¹*$/) 使用正则校验

myGroup1: FormGroup;
 this.myGroup1 = new FormGroup({
      Mid: new FormControl(null, [Validators.required, Validators.minLength(10), Validators.maxLength(10)]),
      IMEI: new FormControl(null, [Validators.required, Validators.minLength(15), Validators.maxLength(15),
        Validators.pattern(/^[0-9]*$/)]),  
    });

不能忘不然报错

 get Mid() {
    return this.myGroup1.get('Mid');
  }
  get IMEI() {
    return this.myGroup1.get('IMEI');
  }

提交表单时
for (const i in this.myGroup1.controls) { this.myGroup1.controls[i].markAsDirty(); this.myGroup1.controls[i].updateValueAndValidity(); }

0-9 ↩︎