angular表单验证

修炼爱情 · 發表於 2020-8-4 20:55:00

1、添加form标签

1、页面中添加form标签，并为form标签添加一个指令 #form=”ngForm”（#后的表单名称是自定义的，这里是为在表单提交的时候，按钮禁用做准备）

<form (ngSubmit)="btnHandle('login')" #loginForm="ngForm"></form>

2、form标签内input输入框的属性

2.1、给form标签下所有input标签添加name属性，不然控制台会报错，报错信息是让添加name属性或者是添加[ngModelOptions]=”{standalone : true}”
2.2、使用[(ngModel)]双向绑定数据，并通过#（需要验证字段的名称，这里也是自定义的）=”ngModel”，来指向绑定的输入框。添加需要校验的正则表达式，pattern=”^1[3456789]\d{9}$”,如果是必填项，添加required属性。

<input type="number" [(ngModel)]="loginData.telphone" pattern="^1[3456789]\d{9}$" placeholder="请输入手机号" required #mobile="ngModel" name="loginData.telphone" />

3、添加校验信息

3.1、通过 ngModel 跟踪修改状态与有效性验证，在表单中使用 ngModel 可以获得比仅使用双向数据绑定更多的控制权。它还会告诉你很多信息：用户碰过此控件吗？它的值变化了吗？数据变得无效了吗？NgModel 指令不仅仅跟踪状态。它还使用特定的 Angular CSS 类来更新控件，以反映当前状态。可以利用这些 CSS 类来修改控件的外观，显示或隐藏消息。

3.2、往 input标签上添加名叫 spy 的临时模板引用变量，然后用这个 spy 来显示它上面的所有 CSS 类。

 <div class="input_item">
      <p>手机号</p>
      <input type="number" [(ngModel)]="loginData.telphone" pattern="^1[3456789]\d{9}$" placeholder="请输入手机号" required #mobile="ngModel" name="loginData.telphone" #spy />
 </div>
 <div>{{spy.className}}</div>

（1）未进行任何操作的时候

（2）输入符合pattern格式的内容

3.3、通过检查输入内容的invalid、dirty、touched，来校验数据的有效性

<div *ngIf="mobile.invalid && (mobile.dirty || mobile.touched)" class="dhl_error">
  <div *ngIf="mobile.errors.required">
      {{validator.validate.errorMsg.tel.empty}}
  </div>
  <div *ngIf="mobile.errors.pattern">
      {{validator.validate.errorMsg.tel.error}}
  </div>
</div>

这里的校验信息，在服务里面定义了相应的错误提示语,可以全局共享

4、禁用按钮

4.1、通过定义的表单名称.form.valid的反值来禁用提交按钮，如果输入的内容都有效，这个值为true，按钮才可以点击。

 <button [disabled]="!loginForm.form.valid" class="dhl_red_btn">登录</button>

4.2、在form标签中直接提交表单，用（ngSubmit）来处理表单提交事件。

5、小结

完整代码如下：

<form (ngSubmit)="btnHandle('login')" #loginForm="ngForm">
     <div class="border_bottom">
        <div class="input_item">
           <p>手机号</p>
           <input type="number" [(ngModel)]="loginData.telphone" pattern="^1[3456789]\d{9}$" placeholder="请输入手机号" required #mobile="ngModel" name="loginData.telphone" #spy />
        </div>
        <div class="fontmedium padding15 fontSize16">{{spy.className}}</div>
        <div *ngIf="mobile.invalid && (mobile.dirty || mobile.touched)" class="dhl_error">
           <div *ngIf="mobile.errors.required">
               {{validator.validate.errorMsg.tel.empty}}
            </div>
            <div *ngIf="mobile.errors.pattern">
               {{validator.validate.errorMsg.tel.error}}
            </div>
            </div>
        </div>
     <div class="button">
         <button [disabled]="!loginForm.form.valid" class="dhl_red_btn">登录</button>
         <a routerLink="/register"><button class="register dhl_border_btn">注册</button></a>
      </div>
</form>

来源：https://www.cnblogs.com/liyfya/p/13435853.html