angular 自定义表单验证

说明

前端校验基本是每个开发者必须具备的能力，除了我们自己用一些插件去做一些校验外，比如vue中就需要自己引入一些库去做。那么angular给我们内置了哪些了？其实angular内置也好，不用我们 自己去捣鼓，但是用是感觉很一般吧。

例子

1 一个简单的账户、密码、手机号的界面及代码

import { Component } from '@angular/core';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  // templateUrl: './app.component.html',
  template: `
  <form action="" [formGroup]="valiDataForm">
    帐号: <input required type="text" formControlName="username"><br>
    <p *ngIf="valiDataForm.get('username')?.errors?.required">请输入帐号</p>
    密码: <input required type="text" formControlName="password"><br>
    手机号: <input required type="text" formControlName="phone"><br>
    <button (click)="submit()">提交</button>
  </form>
  `,
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  constructor(private fb: FormBuilder) {

  }

  submit() {
    console.log(this.valiDataForm.get('username'))
  }
  valiDataForm: FormGroup = this.fb.group({
    username: ['', [Validators.required, Validators.maxLength(18), Validators.minLength(6)]],
    password: ['', [this.passwordVal]],
    phone: ['', [Validators.required, this.phoneVal]]
  })

  passwordVal(password: FormControl): object {
    let value = password.value;
    if (!value) {
      return { msg: "请输入密码" }
    } else {
      const valid = value.match(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9a-zA-Z]{6,20}$/)
      return valid ? {} : { msg: "密码格式不正确" }
    }
  }
  phoneVal(phone: FormControl): object {
    const value = phone.value || "";
    if (!value) {
      return { msg: "请输入手机号" }
    } else {
      const valid = /[0-9]{11}/.test(value);
      return valid ? {} : { msg: "联系电话必须是11位数字" }
    }
  }
}

对于初学者来说，代码可能有点多，几个重点解释下
1 angular内置的表单验证是FormControl, FormGroup, FormBuilder, Validators几个控件
2 valiDataForm.get(‘username’) 可以拿到对应输入框的控件内容，自己可以console.log看下
3

valiDataForm: FormGroup = this.fb.group({
    username: ['', [Validators.required, Validators.maxLength(18), Validators.minLength(6)]],
    password: ['', [this.passwordVal]],
    phone: ['', [Validators.required, this.phoneVal]]
  })

这里面就是一些封装好的表单验证写法，第一个‘’是期望的值，后面的[]，是内置的一些方法和自定义的方法。