需求:邮箱验证、密码验证、用户名验证、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、效果

Angular中的FormControl

 

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-11-08
  • 2022-12-23
  • 2021-06-19
  • 2021-09-03
  • 2021-07-22
猜你喜欢
  • 2021-08-24
  • 2022-12-23
  • 2022-12-23
  • 2022-01-28
  • 2022-12-23
  • 2021-09-18
  • 2021-08-15
相关资源
相似解决方案