位置: 编程技术 - 正文

Angular实现表单验证功能(angular form表单)

编辑:rootadmin

推荐整理分享Angular实现表单验证功能(angular form表单),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:angularjs表格,angularjs表格,angular动态生成表单,angular表格,angular实例,angularjs表格,angular自定义表单验证,angular form表单,内容如对您有帮助,希望把文章链接给更多的朋友!

Angular表单验证分为两种验证:1.内置验证(required,minlength等);2.自定义验证(正则表达式)。

接下来我们用一个注册账号的demo来看一下这两种验证是如何实现的。

项目界面

一、内置验证

其中账户名有required验证和最短长度验证,其他两个只有required验证

1.项目目录

----------app.component.ts

----------app.component.html

----------app.component.css

----------app.module.ts

2.项目代码

app.module.ts

app.component.ts

简单来说,在使用验证表单的时候,大致分为四步:

(1)导入相关模块FormGroup, FormControl, Validators;

(2)声明表单验证变量From:FromGroup;

(3)定义验证规则;

Angular实现表单验证功能(angular form表单)

(4)通过它所属的控件组(FormGroup)的get方法来访问表单控件

app.component.html

app.component.css

3.项目效果

二、自定义验证

自定义表单验证,需要创建自定义验证器,我们接下来更改邮箱的验证,将其改为有格式的验证,而不是单纯的存在验证,首先我们来看一下项目目录的更改

1.项目目录

----------app.component.ts

----------app.component.html

----------app.component.css

----------app.module.ts

----------emailAuthentication.ts

2.项目代码

app.module.ts

注册自定义验证器EmailValidatorDirective

emailAuthentication.ts

app.component.ts

app.component.html

在最后确认的时候,我们设置一下按钮的disabled属性,在表单验证不通过的时候,确认按钮是点击不了的,显示不可点击状态。[disabled]="Form.invalid"。

3.项目效果

标签: angular form表单

本文链接地址:https://www.jiuchutong.com/biancheng/377378.html 转载请保留说明!

上一篇:Vue.js用法详解(vue.js基础语法)

下一篇:vue+vue-validator 表单验证功能的实现代码

  • 服装加工费税收编码
  • 企业所得税如何规避
  • 其他收益里的政府补助免税吗
  • 境内公司没有收购的股票
  • 小规模纳税人销售农产品税率是多少
  • 广告服务收入要计入什么科目
  • 银行日记账写错了怎么改
  • 小规模纳税人建筑服务税率是多少
  • 盘盈固定资产属于企业的会计差错
  • 增值税专票经办人怎么填
  • 核算无形资产的过程中,使用的会计账户有
  • 小规模纳税人开了3%的专票还能享受1%
  • 盘盈入库做什么分录
  • 远期转账支票怎么取钱
  • 总公司要合并分公司报表吗
  • 营改增后小规模纳税人税率是多少
  • 销售无形资产增值税纳税义务发生时间
  • 免交的增值税怎么退
  • 月饼税收分类属于哪一类食品
  • 一般纳税人所得税优惠政策
  • 小规模需要公账还是私账
  • 租金收入的印花税税率是多少
  • 企业所得税如何计算
  • 包装物怎么入账
  • 科技项目经费怎么申报
  • 哪些费用可以抵扣进项税吗
  • 低价销售存货的企业所得税怎么算
  • 预付的各种押金
  • 库存股股本属于什么科目,借贷方向
  • 电脑玩网络游戏一小时多少流量
  • 企业投资收益如何做账
  • 企业取得的利息收入 用什么科目
  • 评估增值资产如何记账
  • win10网络带宽
  • linux runit
  • PHP:spl_autoload_register()的用法_spl函数
  • 公司一直没有收入怎么办
  • 利息费用扣除限额债资比
  • 内斯塔特点
  • html怎么嵌套php
  • 未取得合法凭证税前扣除
  • phpsql查询
  • 2023跨年代码大全可复制免费
  • 金税盘全额抵扣政策
  • 租赁增值税发票税率
  • 科技型中小企业享受优惠税收政策
  • Mysql中 show table status 获取表信息的方法
  • 什么叫金税四期呢?
  • 申请专利的费用怎么入账
  • 发票信息不一致是怎么回事
  • 固定资产的运输费和包装费计入
  • 收到科技局研发项目资金计入什么科目
  • 现金折扣和商业折扣怎么确定收入
  • 12月计提的工资没有发完怎么做账
  • 收不回来的账怎么处理
  • 办公用品的发票可以抵扣吗
  • Win9传闻汇总:通知中心+免费下载+手势功能等
  • win10设置怎么开
  • freebsd ports安装
  • win8安装win10驱动
  • ubuntu下mysql的常用命令
  • macos睡眠
  • mac如何预览字体大小
  • win7系统如何创建新用户
  • linux批量处理文件
  • skynetave.exe - skynetave是什么进程 有什么用
  • ExtJS4 组件化编程,动态加载,面向对象,Direct
  • Unity3D游戏开发标准教程吴亚峰于复兴人民邮电出版社
  • rpg游戏脚本已经被备份
  • js中的原型和原型链
  • 源码分析工具
  • android download(international)
  • Unity for Absolute Beginners(三)
  • Android中dip、dp、sp、pt和px的区别
  • Python连接MySQL并使用fetchall()方法过滤特殊字符
  • 为什么要去山西
  • 准予扣除外购的应税消费品已纳消费税税款的是
  • 国家税务总局23号文件
  • 欠账6万怎么还
  • 新一轮税制改革的背景是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设