时间戳

首页 > 解决方案 > Angular6 表单验证

angular - Angular6 表单验证

问题描述

我正在使用 angular6 文档执行表单验证，现在我确保所有表单验证都已填写，但现在

这是我的问题：

1.) 如何验证密码和确认密码输入值不少于 6 个字符并且密码字段和确认密码字段必须匹配

2.) 如何确保输入的电子邮件地址有效

  <form #r="ngForm" name="theForm" (submit)="reg(r)">
    <div class="form-group">
      <label>Username</label>
      <input type="text"
            class="form-control"
            name="username"
            [(ngModel)]="register.username"
            #registerUsername="ngModel"
            required
            pattern="^[a-zA-Z]+$">
      <span class="help-block danger" *ngIf="registerUsername.errors?.required && registerUsername.touched">
        The username is required
      </span>
      <span class="help-block danger" *ngIf="registerUsername.errors?.pattern && registerUsername.touched">
        The username can only contain the letters a-z or A-Z
      </span>
    </div>





    <div class="form-group">
      <label>Password</label>
      <input type="password"
            class="form-control"
            name="password"
            required
            [(ngModel)]="register.password"
            #registerPassword="ngModel">
      <span class="help-block danger" *ngIf="registerPassword.errors?.required && registerPassword.touched">
        password is required
      </span>
    </div>



 <div class="form-group">
      <label>Confirm Password</label>
      <input type="password"
            class="form-control"
            name="password"
            required
            [(ngModel)]="register.password"
            #registerPassword="ngModel">
      <span class="help-block danger" *ngIf="registerPassword.errors?.required && registerPassword.touched">
        Re-enter password is required
      </span>
    </div>





   <div class="form-group">
      <label>Email</label>
      <input type="email"
            class="form-control"
            name="email"
            required
            [(ngModel)]="register.email"
            #registerEmail="ngModel">
      <span class="help-block danger" *ngIf="registerEmail.errors?.required && registerEmail.touched">
        Email is required
      </span>
    </div>

标签： angular

解决方案

我试图实现你所说的要求，下面是链接：

https://stackblitz.com/edit/angular-formvalidation-wins999-z1sxcw

我已使用内置验证器来缩短长度并验证电子邮件

以及用于密码和确认密码匹配的自定义验证器。

这些链接很有用：

https://angular.io/guide/forms-overview

https://material.angular.io/

我希望它有帮助

推荐阅读