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">

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

    …….

3、错误信息提示：

<div class="form-control-feedback"
     *ngIf="myform.email.errors && (myform.email.dirty || myform.email.touched)">
  <p *ngIf="myform.email.errors.required">Email is requiredp>
  <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 domainp>
div>

4、效果