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">最小长度为2nz-form-explain>nz-form-control>nz-form-item>form>
nz-content>

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

此时得到的效果：

• 必填校验

• 最小长度
  
• 最大长度

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！