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));

}

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