1. 将表单的方法移动到单独的ts文件夹中

2. code

export  function mobileValidator(control: FormControl): any {
const myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
const valid = myreg.test(control.value);
console.log('mobile result: ' + valid);
return valid ? null : {mobile: true}; } export function equalValidator(group: FormGroup): any {
const password: FormControl = group.get('password') as FormControl;
const pconfirm: FormControl = group.get('pconfirm') as FormControl;
const valid: boolean = password.value === pconfirm.value;
console.log('password equal: ' + valid);
return valid ? null : {equal: {descerr: '密码和确认密码不匹配'}};
}

  

3. html

<form [formGroup]="formModel" (submit)="submit()">
<div>
用户名:<input type="text" formControlName="username">
<div [hidden]="!formModel.hasError('required','username')">
用户名是必填项
</div>
<div [hidden]="!formModel.hasError('minlength','username')">
用户名是最小长度为6
</div>
电话:<input type="text" formControlName="mobile">
<div [hidden]="!formModel.hasError('mobile','mobile')">
请输入正确的手机号
</div>
<div formGroupName="passwordsGroup">
密码:<input type="password" formControlName="password">
确认密码:<input type="password" formControlName="pconfirm">
<div [hidden]="!formModel.hasError('minlength',['passwordsGroup', 'password'])">
密码最小长度为6
</div>
<div [hidden]="!formModel.hasError('equal','passwordsGroup')">
{{formModel.getError('equal','passwordsGroup')?.descerr}}
</div>
</div> </div>
<div><button type="submit">保存</button></div>
</form>

  

4. 控制器

  formModel: FormGroup;

  constructor(private http: Http, fb: FormBuilder) {
this.formModel = fb.group({
username: ['', [Validators.required, Validators.minLength(6)]],
mobile: ['', mobileValidator],
passwordsGroup: fb.group({
password: ['', Validators.minLength(6)],
pconfirm: ['']
}, { validator: equalValidator} ),
});
} submit() {
const isValid: boolean = this.formModel.get('username').valid;
console.log('username: ' + isValid);
const errors: any = this.formModel.get('username').errors;
console.log('username errors' + JSON.stringify(errors));
if ( this.formModel.valid) {
console.log(this.formModel.value);
} }

  

5. 状态字段

Angular 4 表单校验2的更多相关文章

  1. Angular 4 表单校验1

    1.html <form [formGroup]="formModel" (submit)="submit()"> <div> 用户名: ...

  2. angularJs表单校验(超级详细!!!)

    html代码 <!DOCTYPE html> <html ng-app="angularFormCheckModule"> <head> < ...

  3. angular js 表单验证

    <!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...

  4. angular之表单验证与ngMessages

    刚接触angular1.x很多经常用到的ngMessages的地方,这里顺便记一下,效果如下图: 如果引用了angular-messages.js报如下错误,说明你的angular.js和angula ...

  5. AngularJs轻松入门(六)表单校验

    表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面 ...

  6. ng-messages AngularJs 表单校验方式

    最新研究了一下表单校验,直接上代码. <!DOCTYPE html><html ng-app='app'><head> <meta charset=" ...

  7. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

  8. AngularJS 1.2.x 学习笔记(表单校验篇)

    https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...

  9. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

随机推荐

  1. Spring Data Rest如何暴露ID字段

    package com.example.demo.config; import com.example.demo.model.Comp; import com.example.demo.model.P ...

  2. HDU 1936 区间贪心

    /* *区间贪心.前几天刚做了POJ 1328 ...思路完全相同... *最多有100个表情,100行文字.遍历寻找每个表情的所在区间.时间复杂度大约在10^5 ~ 10^6 可以接受. *然后对每 ...

  3. DELPHI 5种运行程序的方法具体应用实例(带参数)

    http://www.02t.cn/article/code/102.html https://msdn.microsoft.com/en-us/library/windows/desktop/ms6 ...

  4. windows 环境下python 安装 pypcap 并用pyinstaller打包到exe,解决DLL 加载失败。

    安装 PYQT5 pypcap 环境: windows10_x64 python3.6.3 pycharm2017.2.4 备注: 需要安装 Visual C++ Build Tools 2015 可 ...

  5. 网络协议栈学习(二)创建 socket

    下面通过学习linux 1.2.13源码进一步理解socket通信机制.对该版本源码的学习主要参考<Linux内核网络栈源代码情景分析>(曹桂平 编著). 要理解socket的本质,就要理 ...

  6. sql server中的go

    1. 作用:向 SQL Server 实用工具发出一批 Transact-SQL 语句结束的信号.2. 语法:一批 Transact-SQL 语句GO如Select 1Select 2Select 3 ...

  7. java异常(编程思想)

    通过异常处理错误 java的基本理念是“结构不佳的代码不能运行” 发现错误的理想时机是在编译阶段,也就是在你试图运行程序之前.然而编译期间并不能找出所有的错误,余下的问题必须在运行间解决.这就需要错误 ...

  8. 安装sybase服务器并连接数据库

    一. 安装sybase服务器(根据安装指南安装) win32位的系统安装1550_winx86_32+补丁包eBF18157 win64位的系统安装ase157_winx64_安装包 如果不创建服务器 ...

  9. STL标准库-Tuple

    技术在于交流.沟通,本文为博主原创文章转载请注明出处并保持作品的完整性 在前面我介绍过一次tuple,今天在书上也看到了tuple,那就在写一次吧. tuple(元组),他的内部可以放任意类型的变量( ...

  10. 解决Android4.3版本下,手机短彩接收中文文件名附件,中文名字的附件无法保存(第二步:解决从从数据库中读取附件文件名,并在长按后保存附件时,中文乱码导致的无法保存附件)

    从第一步我们发现,在第一步修改之后,在短彩绘画界面中中文附件名的附件已无法显示,经过打印堆栈我们发现还是中文乱码在作祟.下面我们接着进行分析,这次我们从UI层往逻辑处理层进行分析.首先我们找到保存附件 ...