angular4 响应式表单以及验证

参考文章：https://www.jianshu.com/p/75ec301387d7

                https://www.jianshu.com/p/6221e4eee4a5

              https://www.kancloud.cn/wujie520303/angular2_note/228706

             https://segmentfault.com/a/1190000010064866 

             https://www.jianshu.com/p/75ec301387d7

           https://www.jb51.net/article/117977.htm

参考实例： angular4

HTML: 

<div class="container">
  <div class="row">
    <div
      class="col-lg-4 col-lg-offset-4  col-md-4 col-md-offset-4   col-ms-6 col-ms-offset-3  col-xs-10 col-xs-offset-1 ">
      <img alt="" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1970046395,3635607724&fm=26&gp=0.jpg">
    </div>
  </div>
  <div class="row">
    <div
      class=" col-lg-4 col-lg-offset-4  col-md-4 col-md-offset-4   col-ms-6 col-ms-offset-3  col-xs-10 col-xs-offset-1 ">
      <form class="form-signin" [formGroup]='formmodel' novalidate (ngSubmit)="onSubmit()">
        <div class="input-group">
          <span class="input-group-addon  "><i class="glyphicon glyphicon-user"></i></span>
          <input type="text" class="form-control" placeholder="Email address" formControlName="username" minlength="3"
            maxlength="12" required>
          <span
            *ngIf="!(formmodel.get('username').hasError('required')||formmodel.get('username').hasError('minlength'))"
            class="glyphicon glyphicon-ok form-control-feedback"></span>
          <span
            *ngIf="((formmodel.get('username').hasError('required')||formmodel.get('username').hasError('minlength')) &&formmodel.get('username').touched)"
            class="glyphicon glyphicon-remove form-control-feedback"></span>

        </div>
        <div class="input-group">

          <span class="input-group-addon "><i class="glyphicon glyphicon-heart"></i></span>

          <input type="password" class="form-control" placeholder="password" formControlName="password" minlength="3"
            maxlength="12" required>

          <span
            *ngIf="!(formmodel.get('password').hasError('required')||formmodel.get('password').hasError('minlength'))"
            class="glyphicon glyphicon-ok form-control-feedback"></span>
          <span
            *ngIf="(formmodel.get('password').hasError('required')||formmodel.get('password').hasError('minlength') )&&formmodel.get('password').touched"
            class="glyphicon glyphicon-remove form-control-feedback"></span>
        </div>

        <div formGroupName="emailconfirm">

          <div class="input-group">

            <span class="input-group-addon "><i class="glyphicon glyphicon-heart"></i></span>

            <input type="text" class="form-control" placeholder="email1" formControlName="email1" required>

            <span
              *ngIf="(formmodel.get('emailconfirm').hasError('required')||formmodel.get('emailconfirm').hasError('emailMatcher') )&&formmodel.get('emailconfirm').touched&&formmodel.get('emailconfirm').get('email2').dirty"
              class="glyphicon glyphicon-remove form-control-feedback"></span>

            <span
              *ngIf="!(formmodel.get('emailconfirm').hasError('required')||formmodel.get('emailconfirm').hasError('emailMatcher'))&&formmodel.get('emailconfirm').get('email2').touched"
              class="glyphicon glyphicon-ok form-control-feedback"></span>

          </div>

          <div class="input-group">

            <span class="input-group-addon "><i class="glyphicon glyphicon-heart"></i></span>

            <input type="text" class="form-control" placeholder="email2" formControlName="email2" required>


            <span
              *ngIf="(formmodel.get('emailconfirm').hasError('required')||formmodel.get('emailconfirm').hasError('emailMatcher') )&&formmodel.get('emailconfirm').touched&&formmodel.get('emailconfirm').get('email2').dirty"
              class="glyphicon glyphicon-remove form-control-feedback"></span>

            <span
              *ngIf="!(formmodel.get('emailconfirm').hasError('required')||formmodel.get('emailconfirm').hasError('emailMatcher'))&&formmodel.get('emailconfirm').get('email2').touched"
              class="glyphicon glyphicon-ok form-control-feedback"></span>
          </div>
          <div>
            <span
              *ngIf="(formmodel.get('emailconfirm').hasError('required')||formmodel.get('emailconfirm').hasError('emailMatcher') )&&formmodel.get('emailconfirm').touched&&formmodel.get('emailconfirm').get('email2').dirty">密码不一致</span>

          </div>
        </div>

        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>
        <button [disabled]="!formmodel.valid" class="btn btn-lg btn-primary btn-block" type="submit">Sign
          in</button>

      </form>
    </div>
  </div>
</div>

               

ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent  implements OnInit {
 
  constructor( private  fb:FormBuilder){

  }
  title = 'app';
  formmodel:FormGroup;
  username:string ="";

  ngOnInit(){
      
    this.formmodel =  this.fb.group({
      username: this.fb.control("",[Validators.required,Validators.minLength(3)]),
      password: this.fb.control("",[Validators.required,Validators.minLength(3)]),
      emailconfirm:this.fb.group({
        email1:this.fb.control("",[Validators.required]),
        email2:this.fb.control("",[Validators.required]),
      },{validator:emailMatcher})
    })
  }



  onSubmit(){
     console.log(this.formmodel);

     debugger
  }


}

 

emailMatcher.ts

import { AbstractControl } from "@angular/forms";

export  const passWordMatcher=(control:AbstractControl)=>{

    let  passWord1 =  control.get("password1");
    let  passWord2 =  control.get("password2");

    if(!passWord1||!passWord2) return null;

    if(passWord1.value.replace(/\s*/g,"")===passWord2.value.replace(/\s*/g,""))  return null;
  
    return passWord1.value.replace(/\s*/g,"") !==passWord2.value.replace(/\s*/g,"")?{passWordMatcher:true}:null;

   
}