Angular学习笔记52：模板驱动式表单添加基本的校验器

继Angular学习笔记51：响应式表单的异步校验器,现在来看看模板驱动式表单验证。

创建模板驱动式表单

1. 创建组件：forms-validator

wujiayudeMacBook-Pro:demo-test wjy$ ng g c forms-validator
CREATE src/app/forms-validator/forms-validator.component.less (0 bytes)
CREATE src/app/forms-validator/forms-validator.component.html (34 bytes)
CREATE src/app/forms-validator/forms-validator.component.spec.ts (685 bytes)
CREATE src/app/forms-validator/forms-validator.component.ts (305 bytes)
UPDATE src/app/app.module.ts (1892 bytes)

2. 创建表单和一个Input控件

修改组件forms-validator的模版文件

<nz-content>
  <nz-divider nzText="模板驱动式表单验证"></nz-divider>
  <form nz-form>
    <nz-form-item>
      <nz-form-label nzSpan="3" nz-col>姓名</nz-form-label>
      <nz-form-control nzSpan="6" nz-col>
        <input nz-input type="text" name="name" [(ngModel)]="name" [ngModelOptions]="{standalone: true}">
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-content>

修改组件forms-validator的类文件

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-forms-validator',
  templateUrl: './forms-validator.component.html',
  styleUrls: ['./forms-validator.component.less']
})
export class FormsValidatorComponent implements OnInit {
  public name = null;

  constructor() {
  }

  ngOnInit() {
  }

}

为模板驱动式表单中的控件增加基本校验器

1. 给name控件增加基础的校验：必填校验、最大长度、最小长度校验

为模板驱动表单中添加验证机制，需要用到的是你要添加一些验证属性（原生的 HTML 表单验证器）。 Angular 会用指令来匹配这些具有验证功能的指令，
每当表单控件中的值发生变化时，Angular 就会进行验证，并生成一个验证错误的列表（对应着 INVALID 状态）或者 null（对应着 VALID 状态
此时可以将 ngModel 导出成为一个局部变量（#variable = ngModel），来观察此控件的状态变化。

所以此处的input的三个校验如下：

<nz-content>
  <nz-divider nzText="模板驱动式表单验证"></nz-divider>
  <form nz-form>
    <nz-form-item>
      <nz-form-label nzSpan="3" nz-col>姓名</nz-form-label>
      <nz-form-control nzSpan="6" nz-col>
        <input nz-input type="text" name="name" id="name"
               required minlength="2" maxlength="10"
               #nameValidate="ngModel"
               [(ngModel)]="name" [ngModelOptions]="{standalone: true}">
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-content>

利用required、minlength、maxlength 这三个属性为Input增加了必填、最大长度、最小长度这三个校验。并使用变量nameValidate来观察当前控件的状态。

2. 给name控件的校验增加提示信息

<nz-content>
  <nz-divider nzText="模板驱动式表单验证"></nz-divider>
  <form nz-form>
    <nz-form-item>
      <nz-form-label nzSpan="3" nz-col>姓名</nz-form-label>
      <nz-form-control nzSpan="6" nz-col>
        <input nz-input type="text" name="name" id="name"
               required minlength="2" maxlength="10"
               #nameValidate="ngModel"
               [(ngModel)]="name" [ngModelOptions]="{standalone: true}">
        <nz-form-explain *ngIf="nameValidate.invalid && nameValidate.dirty && nameValidate.errors.required">
          必填选项不能为空
        </nz-form-explain>
        <nz-form-explain *ngIf="nameValidate.invalid && nameValidate.dirty && nameValidate.errors.minlength">
          最小长度为2
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-content>

这里只增加了 必填和最小长度的校验，因为设置了最大长度以后，用户的输入就无效了。

此时得到的效果：

• 必填校验

• 最小长度
  
• 最大长度

以上代码可以参考W先生的GitHub