时间:2021-05-28
一、前提
二、正文
(一)、新建表单(模板表单)
1、新建名称为formValidator的ng项目——命令行输入ng new formValidator;
2、修改pakage.json文件——添加参数,方便开发,命令行输入npm start启动项目;
"scripts": { "ng": "ng", "start": "ng serve --open --port 4210",//修改端口号&自动打开默认浏览器窗口 "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" },3、新建组件,命令行输入ng g c templateForm --spec false;
4、将app.components.html中的内容,替换成<app-template-form></app-template-form>
5、在app.module.ts中引入FormModul并在import中使用;
6、书写formValidator组件
//template-form.html <div class="container"> <form (ngSubmit)="save()" #myForm="ngForm"> <input type="text" [(ngModel)]="name" //双向数据绑定 name="name" //使用form时必须定义,可以理解为当前控件的名字 #myName="ngModel" //检查当前控件状态的出口,应用:myName.valid、myName.errors等 autocomplete="off" //关闭浏览器自带的显示历史记录 h5新属性 [appVerifyName]="nameList" //添加验证器 > <!--invalid是否验证成功--> <!--dirty是否改变--> <!--touched是否被抚摸过--> <div *ngIf="myName.invalid && (myName.dirty || myName.touched)"> <div *ngIf="myName.errors.required"> 名称为必填项 </div> <div *ngIf="myName.errors.repeat"> 名称重复 </div> </div> <button type="submit" [disabled]="!myForm.form.valid">提交</button> //验证通过才能提交 </form> </div> //template-form.ts ... name: string; nameAry:string[] = ['zhangsan','lisi','wangwu']; constructor() { } ngOnInit() {} save(): void{ console.log('save 发请求') } ...(二)、验证表单
1、新建指令,用于验证ng g c d share/verifyName
2、在share目录下新建nameValidator.ts,用于书写验证函数
//share/nameValidator.ts import { ValidatorFn, AbstractControl } from "@angular/forms"; export function nameValidator(nameList: string[]): ValidatorFn { return (control: AbstractControl): { [key: string]: any } | null => { //依据指令中传递进来的名称列表进行判断,如果包含,就返回一个对象,对象的key将 //作为模板(template-form.html)中被验证的控件的erros的key,如果不包含返回null //表示验证通过 return nameList.includes(control.value) ? { 'repeat': { value: control.value } } : null; }; }3、书写指令——验证名称不能重复
//verify-name.directive.ts import { Directive, Input } from '@angular/core'; import { Validator, NG_VALIDATORS, AbstractControl } from '@angular/forms'; import { nameValidator } from './nameValidator'; @Directive({ selector: '[appVerifyName]', providers: [{ provide: NG_VALIDATORS, useExisting: VerifyNameDirective, multi: true }] }) export class VerifyNameDirective implements Validator { //实现Validator接口 @Input('appVerifyName') //接收验证规则(reg),或者你希望传到指令中的什么 nameList: string[]; validate(control: AbstractControl): { [key: string]: any } | null { return this.name ? nameValidator(nameList)(control) : null } }三、碎碎念
如果只有一个表单或者项目比较小巧,用这样的验证机制,我认为是不太明智的(用ng都没必要),随便弄个计数器或者标识位就能达到dirty和touched的效果,反之,大概率上没有一个项目有一万个表单控件,定义9000个验证规则的,所以可以高度复用,而且维护起来也灵活一些
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Angular支持非常强大的内置表单验证,maxlength、minlength、required以及pattern。使用Angular的内置表单校验能够完成绝
本文实例讲述了AngularJS学习笔记之表单验证功能。分享给大家供大家参考,具体如下:一、执行基本的表单验证表单angular.module('example
本文实例讲述了AngularJS验证信息框架的封装插件用法。分享给大家供大家参考,具体如下:AngularJS的表单验证规则angular.js的表单验证规则有
Angular可使用指令无缝地增强标准表单元素的功能,我们将讨论它的优点,包括:数据绑定、建立模型属性、验证表单、验证表单后反馈信息、表单指令属性下面我们通过案
几乎每个web应用都会用到表单,Angular为我们提供了几个内置validators(验证器),但在实际工作中为了满足项目需求,我们经常需要为应用添加一些自定