当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > Angular8基础应用之表单及其验证

Angular8基础应用之表单及其验证

2019年09月06日  | 移动技术网IT编程  | 我要评论

一、前提

  • 必要性：特别必要
  • 意义：很有意义

二、正文

（一）、新建表单（模板表单）

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个验证规则的，所以可以高度复用，而且维护起来也灵活一些

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对移动技术网的支持。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网