开发者社区> 华章计算机> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

2.4 表单数据的验证

简介:
+关注继续查看

2.4 表单数据的验证


通常情况下,表单的数据是有一定规则的,我们需要依照其规则对输入的数据做验证以及反馈验证结果。Angular 2中对表单验证有非常完善的支持,我们继续上面的例子,在login组件中,我们定义了一个用户名和密码的输入框,现在我们来为它们加上规则。首先我们定义一下规则,用户名和密码都是必须输入的,也就是不能为空。更改login.component.ts中的模板为下面的样子:

<div>

  <input required type="text"

    [(ngModel)]="username"

    #usernameRef="ngModel"

    />

    {{usernameRef.valid}}

  <input required type="password"

    [(ngModel)]="password"

    #passwordRef="ngModel"

    />

    {{passwordRef.valid}}

  <button (click)="onClick()">Login</button>

</div>

注意,我们只是为username和password两个控件加上了required这个属性,表明这两个控件为必填项。通过#usernameRef=”ngModel”我们重新又加入了引用,这次的引用指向了ngModel,这个引用是要在模板中使用的,所以才加入这个引用。如果不需要在模板中使用,可以不要这句。{{表达式}}双花括号表示解析括号中的表达式,并把这个值输出到模板中。

这里我们为了可以显性地看到控件的验证状态,直接在对应控件后输出了验证的状态。初始状态可以看到两个控件的验证状态都是false,试着填写一些字符在两个输入框中,看看状态变化吧,如图2.6所示。

 

图2.6 表单验证状态

我们知道了验证的状态是什么,但是如果我们想知道验证失败的原因怎么办呢?我们只需要将{{usernameRef.valid}}替换成{{usernameRef.errors | json}}即可。|是管道操作符,用于将前面的结果通过管道输出成另一种格式,这里就是把errors对象输出成json格式的意思。看一下结果吧,返回的结果如下,见图2.7。

 

图2.7 管道输出

如果除了不能为空,我们为username再添加一个规则试试看呢,比如字符数不能少于3:

<input type="text"

  [(ngModel)]="username"

  #usernameRef="ngModel"

  required

  minlength="3"

/>

这时打开浏览器,看一下效果,如图 2.8所示。

 

图2.8 多规则验证

现在我们试着把{{表达式}}替换成友好的错误提示,我们想在有错误发生时显示错误的提示信息。那么我们来改造一下template:

<div>

  <input type="text"

    [(ngModel)]="username"

    #usernameRef="ngModel"

    required

    minlength="3"

    />

    {{ usernameRef.errors | json }}

    <div *ngIf="usernameRef.errors?.required">this is required</div>

    <div *ngIf="usernameRef.errors?.minlength">should be at least 3 charactors</div>

  <input required type="password"

    [(ngModel)]="password"

    #passwordRef="ngModel"

    />

    <div *ngIf="passwordRef.errors?.required">this is required</div>

  <button (click)="onClick()">Login</button>

</div>

ngIf也是一个Angular 2的指令,顾名思义,是用于做条件判断的。*ngIf=”

usernameRef.errors?.required”的意思是当usernameRef.errors.required为true时显示div标签。那么,那个?是干嘛的呢?因为errors可能是个null,如果这个时候调用errors的required属性肯定会引发异常,那么?就是标明errors可能为空,在其为空时就不用调用后面的属性了。

如果我们把用户名和密码整个看成一个表单的话,我们应该把它们放在一对<form></form>标签中,类似地加入一个表单的引用formRef:

<div>

  <form #formRef="ngForm">

    <input type="text"

      [(ngModel)]="username"

      #usernameRef="ngModel"

      required

      minlength="3"

      />

      <div *ngIf="usernameRef.errors?.required">this is required</div>

      <div *ngIf="usernameRef.errors?.minlength">should be at least 3 charactors</div>

    <input type="password"

      [(ngModel)]="password"

      #passwordRef="ngModel"

      required

      />

      <div *ngIf="passwordRef.errors?.required">this is required</div>

    <button (click)="onClick()">Login</button>

  </form>

</div>

这时运行后会发现原本好用的代码出错了,这是由于如果在一个大的表单中,ngModel会注册成Form的一个子控件,注册子控件需要一个name,这要求我们显式地指定对应控件的name,因此我们需要为input增加name属性:

<div>

  <form #formRef="ngForm">

    <input type="text"

      name="username"

      [(ngModel)]="username"

      #usernameRef="ngModel"

      required

      minlength="3"

      />

      <div *ngIf="usernameRef.errors?.required">this is required</div>

      <div *ngIf="usernameRef.errors?.minlength">should be at least 3 charactors</div>

    <input type="password"

      name="password"

      [(ngModel)]="password"

      #passwordRef="ngModel"

      required

      />

      <div *ngIf="passwordRef.errors?.required">this is required</div>

    <button (click)="onClick()">Login</button>

    <button type="submit">Submit</button>

  </form>

</div>

既然我们增加了一个formRef,我们就看看formRef.value有什么吧。 首先为form增加一个表单提交事件的处理 <form #formRef=”ngForm” (ngSubmit)=”onSubmit(formRef.value)”>。 然后在组件中增加一个onSubmit方法:

onSubmit(formValue) {

console.log(formValue);

}

你会发现formRef.value中包括了表单所有填写项的值。还是在浏览器Console中观察一下,如图 2.9所示。

 

图 2.9 表单引用

有时候,在表单项过多时需要对表单项进行分组,HTML中提供了fieldset标签用来处理。那么我们看看怎么和Angular 2结合吧:

<div>

  <form #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">

    <fieldset ngModelGroup="login">

      <input type="text"

        name="username"

        [(ngModel)]="username"

        #usernameRef="ngModel"

        required

        minlength="3"

        />

        <div *ngIf="usernameRef.errors?.required">this is required</div>

        <div *ngIf="usernameRef.errors?.minlength">should be at least 3 charactors</div>

      <input type="password"

        name="password"

        [(ngModel)]="password"

        #passwordRef="ngModel"

        required

        />

        <div *ngIf="passwordRef.errors?.required">this is required</div>

      <button (click)="onClick()">Login</button>

      <button type="submit">Submit</button>

    </fieldset>

  </form>

</div>

<fieldset ngModelGroup=”login”>意味着我们对于fieldset之内的数据都分组到了login对象中,在浏览器Console中可以看到这个对象的输出,如图 2.10所示。

 

图2.10 表单验证

接下来我们改写onSubmit方法用来替代onClick,因为看起来这两个按钮重复了,我们需要去掉onClick。首先去掉template中的<button (click)="onClick()">Login</button>,然后把<button type="submit">标签后的Submit文本替换成Login,最后改写onSubmit方法:

onSubmit(formValue) {

  console.log('auth result is: '

    + this.service.loginWithCredentials(formValue.login.username, formValue.login.password));

}

在浏览器中试验一下吧,所有功能正常工作。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
数据与未来机遇——人机共生
本文记录了一些《人机共生》的阅读摘要。《人机共生》是作者马克·沃伦威德尔在2015年左右写成的著作,虽然距今已有7年,但书中的一些观点在今天回看仍有惊艳之处。故摘录少许,与君共享。
20 0
数据库键、索引、约束及其区别
数据库键、索引、约束及其区别 今天下午刚好没事,把一些基础性的概念理顺一下,存档,省的麻烦,嘿嘿 一.索引 1.       什么是索引? 索引是对数据库表中一列或多列的值进行排序的一种结构。 在关系型数据库中,索引是一种与表有关的数据库结构,是事实存在的。
1690 0
验证数据工具类目
using System.Text.RegularExpressions; namespace Commons.Helpers { /// /// 验证助手类 /// public class ValidHelper { ...
1017 0
2.数据库约束
<div style="font-family:微软雅黑; font-size:14px; line-height:21px; widows:auto"><strong><span style="background-color:inherit">约束</span>:</strong></div> <div style="font-family:微软雅黑; font-size:14px;
1202 0
mvc基础系列说谈(7)——数据验证(下)
这篇说一下数据注释验证(Data Annotation Validators) 这种验证方式在1.0里是不被支持的,但在.net4.0和2.0中会被支持。所以如果要在1.0中使用(我用的是vs2008和mvc 1.
546 0
mvc基础系列说谈(7)——数据验证(下)
这篇说一下数据注释验证(Data Annotation Validators) 这种验证方式在1.0里是不被支持的,但在.net4.0和2.0中会被支持。所以如果要在1.0中使用(我用的是vs2008和mvc 1.
640 0
10057
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载