[Angular2 Form] Validation message for Reactive form
<div class="form-field">
<label>Confirm Password: </label>
<input type="text" formControlName="confirm" [(ngModel)]="signup.confirm" name="confrim">
<div *ngIf="!signupForm.valid">
<span *ngIf="signupForm.get('confirm').hasError('confirmPassword') && signupForm.get('confirm').touched">
{{signupForm.get('confirm').errors?.confirmPassword.message}}
</span>
<span *ngIf="signupForm.get('confirm').hasError('required') && signupForm.get('confirm').dirty">This field is requred</span>
</div>
</div>
'signupForm' is a formGroup.
we can use 'hasError' & 'get()' methods to write the code.
[Angular2 Form] Validation message for Reactive form的更多相关文章
- [Angular2 Form] Reactive form: valueChanges, update data model only when form is valid
For each formBuild, formControl, formGroup they all have 'valueChanges' prop, which is an Observable ...
- Angular:Reactive Form的使用方法和自定义验证器
本文将介绍Angular(Angular2+)中Reactive Form的有关内容,包括: Reactive Form创建方法 如何使用验证 自定义验证器 下面开始进入正文! Reactive Fo ...
- regex & form validation & phone
regex & form validation https://regexper.com/ https://gitlab.com/javallone/regexper-static https ...
- [Angular] Reactive Form -- FormControl & formControlName, FormGroup, formGroup & formGroupName
First time dealing with Reactive form might be a little bit hard to understand. I have used Angular- ...
- angular reactive form
这篇文章讲了angular reactive form, 这里是angular file upload 组件 https://malcoded.com/posts/angular-file-uploa ...
- jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- jquery提交form表单插件jquery.form.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- {Django基础十之Form和ModelForm组件}一 Form介绍 二 Form常用字段和插件 三 From所有内置字段 四 字段校验 五 Hook钩子方法 六 进阶补充 七 ModelForm
Django基础十之Form和ModelForm组件 本节目录 一 Form介绍 二 Form常用字段和插件 三 From所有内置字段 四 字段校验 五 Hook钩子方法 六 进阶补充 七 Model ...
- Jquery组织Form表单提交之Form submission canceled because the form is not connected
有时候导出Excel时需要根据某些条件筛选数据,然后将数据通过NPOI生成Excel并导出.组织数据时可以通过放到一个表单中,某些场景是使用脚本(如:jquery)组织一个form(通过字符串拼接), ...
随机推荐
- 玩转redux--从会用到庖丁解牛
目录 为何而写 redux是什么 redux的设计哲学 redux的工作流 redux的几个核心要素 store action reducer actionCreator combineReducer ...
- 威佐夫博奕(Wythoff Game)
出现奇异局面,先取者必败,反之后拿者必败 奇异局面:(0,0) (1,2) (3,5) (4,7) (ak,bk) ak=bk-k,ak=k*(1+√5)/2: 代码实现(poj 1067): #in ...
- Centos6.4安装opennebula
Centos6.4安装opennebula #安装163源 http://mirrors.163.com/.help/CentOS6-Base-163.repo #安装epel源 wget http: ...
- activity-启动动画的设定(下面弹出出现,弹入下面消失)
1.今天为了把一个activity以dialog的形式显示,而且实现从开始的时候从底部往上弹出,结束的时候,从上往下消失,做了如下的工作. 1)如果把一个activity以dialog的形式显示? 这 ...
- 父子margin塌陷
1.使用padding 2.给父级使用border 3.给父级添加属性 overflow:hidden 4.浮动 5.定位{absolute,fixed} 6.伪元素代码 .parent:before ...
- AJAX - 封装AJAX GET 数组join( )方法 键值对取value POST请求参数注意点
function objToStr(obj){ obj.t = new Date().getTime(); // 给obj动态增加了一个属性 // 这个给对象添加属性的方法, 会被直接加到键值对里?? ...
- UML类图与类图中的关系
以下内容摘自<Java与模式> 在类与类之间,会有连线指明它们之间的关系.类和类.类和接口.接口和接口之间可以建立以下几种关系:一般化关系.关联关系.聚合关系.合成关系和依赖关系,这几种关 ...
- 6.在单机上实现ZooKeeper伪机群/伪集群部署
转自:https://blog.csdn.net/poechant/article/details/6633923
- 关于ES6(ES2015)的知识点详细总结
ECMAScript6 ECMAScript简称就是ES,你可以把它看成是一套标准,JavaScript就是实施了这套标准的一门语言,现在主流浏览器使用的是ECMAScript5. http://ba ...
- vue.js的基础与语法
Vue的实例 创建第一个实例: {{}} 被称之为插值表达式.可以用来进行文本插值. <!DOCTYPE html> <html lang="en"> &l ...