1.html

<form [formGroup]="formModel" (submit)="submit()">
   <div>
     用戶名：<input  type="text" formControlName="username">
     電話：<input  type="text" formControlName="mobile">

     <div formGroupName="passwordsGroup">
       密碼：<input  type="password" formControlName="password">
       確認密碼：<input  type="password" formControlName="pconfirm">
     </div>

   </div>
  <div><button type="submit">保存</button></div>
</form>

2. 控制器中創建FormModel

  constructor(private http: Http, fb: FormBuilder) {
    this.formModel = fb.group({
      username:  [‘‘, [Validators.required, Validators.minLength(10)]],
      mobile:  [‘‘, this.mobileValidator],
      passwordsGroup: fb.group({
          password:  [‘‘],
          pconfirm: [‘‘]
      }, { validator: this.equalValidator} ),
    });
  }

3. 創建自定義校驗器

  mobileValidator(control: FormControl): any {
    const myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
    const valid = myreg.test(control.value);
    console.log(‘mobile result: ‘ + valid);
    return valid ? null : {mobile: true};

  }

  equalValidator(group: FormGroup): any {
    const password: FormControl = group.get(‘password‘) as FormControl;
    const pconfirm: FormControl = group.get(‘pconfirm‘) as FormControl;
    const valid: boolean = password.value === pconfirm.value;
    console.log(‘password equal: ‘ + valid);
    return valid ? null : {equal: true};
  }

　　mobileValidator用來校驗電話號碼是否有效

　　equalValidator 用來校驗兩次輸入的密碼是否一致

4. submit方法

  submit() {
    const isValid: boolean = this.formModel.get(‘username‘).valid;
    console.log(‘username: ‘ + isValid);
    const errors: any = this.formModel.get(‘username‘).errors;
    console.log(‘username errors‘ + JSON.stringify(errors));
    if ( this.formModel.valid) {
      console.log(this.formModel.value);
    }

  }

5.完整的代碼

Angular 表單校驗