<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.

Refer to: Article && Doc

[Angular2 Form] Validation message for Reactive form的更多相关文章

  1. [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 ...

  2. Angular:Reactive Form的使用方法和自定义验证器

    本文将介绍Angular(Angular2+)中Reactive Form的有关内容,包括: Reactive Form创建方法 如何使用验证 自定义验证器 下面开始进入正文! Reactive Fo ...

  3. regex & form validation & phone

    regex & form validation https://regexper.com/ https://gitlab.com/javallone/regexper-static https ...

  4. [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- ...

  5. angular reactive form

    这篇文章讲了angular reactive form, 这里是angular file upload 组件 https://malcoded.com/posts/angular-file-uploa ...

  6. jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

  7. jquery提交form表单插件jquery.form.js

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. {Django基础十之Form和ModelForm组件}一 Form介绍 二 Form常用字段和插件 三 From所有内置字段 四 字段校验 五 Hook钩子方法 六 进阶补充 七 ModelForm

    Django基础十之Form和ModelForm组件 本节目录 一 Form介绍 二 Form常用字段和插件 三 From所有内置字段 四 字段校验 五 Hook钩子方法 六 进阶补充 七 Model ...

  9. Jquery组织Form表单提交之Form submission canceled because the form is not connected

    有时候导出Excel时需要根据某些条件筛选数据,然后将数据通过NPOI生成Excel并导出.组织数据时可以通过放到一个表单中,某些场景是使用脚本(如:jquery)组织一个form(通过字符串拼接), ...

随机推荐

  1. BZOJ4712: 洪水(树链剖分维护Dp)

    Description 小A走到一个山脚下,准备给自己造一个小屋.这时候,小A的朋友(op,又叫管理员)打开了创造模式,然后飞到 山顶放了格水.于是小A面前出现了一个瀑布.作为平民的小A只好老实巴交地 ...

  2. 【Codeforces Round #426 (Div. 2) C】The Meaningless Game

    [Link]:http://codeforces.com/contest/834/problem/C [Description] 有一个两人游戏游戏; 游戏包括多轮,每一轮都有一个数字k,赢的人把自己 ...

  3. JS 图片大小自动调整 (img)

    <script> function dlutChangeImg(){ var maxwidth = 598; var obj = document.getElementById('bbs_ ...

  4. 《二》Java IO 流的分类介绍

    一.根据流向分为输入流和输出流: 注意输入流和输出流是相对于程序而言的. 输出:把程序(内存)中的内容输出到磁盘.光盘等存储设备中        输入:读取外部数据(磁盘.光盘等存储设备的数据)到程序 ...

  5. vue的mode: 'history'模式

    const router = new VueRouter({ mode: 'history', routes: [...] }) 不用mode: 'history'的时候,页面url地址后面会加上一个 ...

  6. MyBatis学习总结(12)——Mybatis+Mysql分页查询

    package cn.tsjinrong.fastfile.util; /**  * @ClassName: Page  * @Description: TODO(分页组件的父类,用来封装分页的 通用 ...

  7. android插件式开发资料整理

    1.DL : Apk动态载入框架 2.android中的动态载入机制

  8. [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 ...

  9. Android控件:RadioButton(单选button)

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  10. 转linux文件的读写

    转自 http://www.open-open.com/lib/view/open1474356438277.html 缓存 缓存是用来减少高速设备访问低速设备所需平均时间的组件,文件读写涉及到计算机 ...