angular表单验证
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>