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

 更新时间:2019-08-11 12:01:53   作者:佚名   我要评论(0)

一、前提

必要性:特别必要
意义:很有意义

二、正文


(一)、新建表单(模板表单)
1、新建名称为formValidator的ng项目——命令行输入ng new form

一、前提

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

二、正文

(一)、新建表单(模板表单)

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

总结

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

您可能感兴趣的文章:

  • AngularJS实现表单验证
  • AngularJS使用ngMessages进行表单验证
  • AngularJS实现表单手动验证和表单自动验证
  • 详解AngularJS实现表单验证
  • Angular2表单自定义验证器的实现
  • angular实现表单验证及提交功能
  • AngularJS中实现用户访问的身份认证和表单验证功能
  • AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
  • 详解AngularJS中的表单验证(推荐)
  • 强大的 Angular 表单验证功能详细介绍

相关文章

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

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

    一、前提 必要性:特别必要 意义:很有意义 二、正文 (一)、新建表单(模板表单) 1、新建名称为formValidator的ng项目——命令行输入ng new form
    2019-08-11
  • PHP利用DWZ.CN服务生成短网址

    PHP利用DWZ.CN服务生成短网址

    使用DWZ.CN生成短网址 <&#63;php /** * FunctionHelper */ class FunctionHelper { // ----------------------------------------------------------
    2019-08-11
  • C#并发实战记录之Parallel.ForEach使用

    C#并发实战记录之Parallel.ForEach使用

    前言: 最近给客户开发一个伙食费计算系统,大概需要计算2000个人的伙食。需求是按照员工的预定报餐计划对消费记录进行检查,如有未报餐有刷卡或者有报餐没刷
    2019-08-11
  • Nginx代理axios请求以及注意事项详解

    Nginx代理axios请求以及注意事项详解

    前言 近期写个小demo,因为用到某大厂的在线数据,接口做了跨域限制,所以利用Nginx代理来解决这些问题。 1. nginx.conf 配置信息 由于nginx.conf配置信
    2019-08-11
  • 简单谈谈MySQL数据透视表

    简单谈谈MySQL数据透视表

    我有一张这样的产品零件表: 部分 part_id part_type product_id -------------------------------------- 1 A 1 2 B 1 3
    2019-08-11
  • Linux curl表单登录或提交与cookie使用详解

    Linux curl表单登录或提交与cookie使用详解

    前言 本文主要讲解通过curl 实现表单提交登录。单独的表单提交与表单登录都差不多,因此就不单独说了。 说明:针对curl表单提交实现登录,不是所有网站都适用
    2019-08-11
  • kotlin实现通知栏提醒功能示例代码

    kotlin实现通知栏提醒功能示例代码

    一、概述 2019年英雄联盟LPL赛区赛季赛打得火热,作为一个RNG粉丝,想通过app实现RNG赛程提醒,于是就有了这次技术实践。我在网上找了很久,几乎没找到使用ko
    2019-08-11
  • MySQL中“:=”和“=”的区别浅析

    MySQL中“:=”和“=”的区别浅析

    = 只有在set和update时才是和:=一样,赋值的作用,其它都是等于的作用。鉴于此,用变量实现行号时,必须用:=。 := 不只在set和update时时赋值的作用,在selec
    2019-08-08
  • 图文介绍mysql中:=和=的区别

    图文介绍mysql中:=和=的区别

    :=和=的区别 = 只有在set和update时才是和:=一样,赋值的作用,其它都是等于的作用。鉴于此,用变量实现行号时,必须用:= := 不只在set和u
    2019-08-08
  • Flutter利用注解生成可自定义的路由的实现

    Flutter利用注解生成可自定义的路由的实现

    route_generator是什么 这是一个简单的 Flutter 路由生成库,只需要少量的代码,然后利用注解配合源代码生成,自动生成路由表,省去手工管理路由代码的烦恼
    2019-08-08

最新评论