Angular中的FormControl

需求：邮箱验证、密码验证、用户名验证、IP地址验证、手机号验证等

方案：

1、键值的形式控制：

this.formGroup = new FormGroup({

username: new FormControl('', [Validators.requried, Validators.pattern('…')]),

password: new FormControl('',),

email: new FormControl('',)

});

get myform() { return this.formGroup.controls; }

2、Label-Input 排版

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()" ">

  <div class="form-group" style="display: block">

<label> </label>

<input class="form-control" formControlName="username"> <input>

</div>

    …….

</form>

3、错误信息提示：

<div class="form-control-feedback"
     *ngIf="myform.email.errors && (myform.email.dirty || myform.email.touched)">
  <p *ngIf="myform.email.errors.required">Email is required</p>
  <p *ngIf="myform.password.errors.pattern">The email address must contain at least @ </p>
  <p *ngIf="myform.email.errors.emailDomain">Email must be on the codecraft.tv domain</p>
</div>

4、效果