angular 表单验证

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]*$/)]),  
    });

3. 不能忘 不然报错

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

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

---

1. 0-9 ↩︎