[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(通过字符串拼接), ...
随机推荐
- BZOJ4712: 洪水(树链剖分维护Dp)
Description 小A走到一个山脚下,准备给自己造一个小屋.这时候,小A的朋友(op,又叫管理员)打开了创造模式,然后飞到 山顶放了格水.于是小A面前出现了一个瀑布.作为平民的小A只好老实巴交地 ...
- 【Codeforces Round #426 (Div. 2) C】The Meaningless Game
[Link]:http://codeforces.com/contest/834/problem/C [Description] 有一个两人游戏游戏; 游戏包括多轮,每一轮都有一个数字k,赢的人把自己 ...
- JS 图片大小自动调整 (img)
<script> function dlutChangeImg(){ var maxwidth = 598; var obj = document.getElementById('bbs_ ...
- 《二》Java IO 流的分类介绍
一.根据流向分为输入流和输出流: 注意输入流和输出流是相对于程序而言的. 输出:把程序(内存)中的内容输出到磁盘.光盘等存储设备中 输入:读取外部数据(磁盘.光盘等存储设备的数据)到程序 ...
- vue的mode: 'history'模式
const router = new VueRouter({ mode: 'history', routes: [...] }) 不用mode: 'history'的时候,页面url地址后面会加上一个 ...
- MyBatis学习总结(12)——Mybatis+Mysql分页查询
package cn.tsjinrong.fastfile.util; /** * @ClassName: Page * @Description: TODO(分页组件的父类,用来封装分页的 通用 ...
- android插件式开发资料整理
1.DL : Apk动态载入框架 2.android中的动态载入机制
- [Vue + TS] Create your own Decorators in Vue with TypeScript
We’ve used @Watch, @Inject and more decorators from vue-property-decorator. In this lesson however w ...
- Android控件:RadioButton(单选button)
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...
- 转linux文件的读写
转自 http://www.open-open.com/lib/view/open1474356438277.html 缓存 缓存是用来减少高速设备访问低速设备所需平均时间的组件,文件读写涉及到计算机 ...