Angular 2’s ngModel provides error objects for each of the built-in input validators. You can access these errors from a reference to the ngModel itself then build useful messaging around them to display to your users.

First, you can use 'ngModel' from 'FormsModule' from angualr2 build module.

<section>
Min length & required: <input type="text" [(ngModel)]="message" #messageRef="ngModel" required minlength="5">
<pre>
Errors: {{messageRef.errors | json}}
Valid: {{messageRef.valid}}
</pre>
<div *ngIf="!messageRef.valid">
<div *ngIf="messageRef.errors?.required">This field is required</div>
<div *ngIf="messageRef.errors?.minlength">Min length is {{messageRef.errors?.minlength.requiredLength}}, but now only {{messageRef.errors?.minlength.actualLength}}</div>
</div>
<br />
<hr/> <button md-button class="md-raised">Add</button>
</section>

Github

[Angular2 Form] Display Validation and Error Messaging in Angular 2的更多相关文章

  1. [Angular2 Form] Style Validation in Angular 2 Forms

    Inputs using Angular 2’s ngModel automatically apply style classes of .ng-validand .ng-invalid each ...

  2. shit element ui & form password validation

    shit element ui & form password validation shit docs https://github.com/yiminghe/async-validator ...

  3. [Angular2 Form] Model Driven Form Custom Validator

    In this tutorial we are going to learn how simple it is to create custom form field driven validator ...

  4. [Angular2 Form] Angular 2 Template Driven Form Custom Validator

    In this tutorial we are going to learn how we can also implement custom form field validation in Ang ...

  5. [Angular2 Form] Reactive Form, show error message for one field

    <form [formGroup]="reactiveForm" novalidate autocomplete="off"> <div cl ...

  6. [Angular2 Form] Validation message for Reactive form

    <div class="form-field"> <label>Confirm Password: </label> <input typ ...

  7. Oracle Form Developer: Folder FRM-99999 Error 14212

    Question: 做FOLDER文件夹功能,打开FORM错误提示: FRM-99999:出现1412错误.有关该错误的详细信息,请参阅发行说明文件(relnotes) Answer: 原因是FOLD ...

  8. [Angular2 Form] Create Radio Buttons for Angular 2 Forms

    Using Radio Buttons in Angular 2 requires a basic understanding of forms as well as how their labels ...

  9. [Angular2 Form] Use RxJS Streams with Angular 2 Forms

    Angular 2 forms provide RxJS streams for you to work with the data and validity as it flows out of t ...

随机推荐

  1. javascript中=、==、===区别详解

    javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...

  2. vim 7.4 编译安装

    (1): 在安装新版本的Vim之前,你需要卸载原来安装的老版本Vim,依次在终端下执行下列命令: sudo apt-get remove vim sudo apt-get remove vim-run ...

  3. C语言基础(不断更新)

    1.memcpy. memmove.memccpy的区别 字符串函数功能查询 memcpy要求源串和目的串不能重叠 memccpy:copy直至遇到由参数指定的ch. memmove: 源串和目的串可 ...

  4. windows端口被占用

    查看端口号被占用进程netstat -a -n -o 强制结束PIDtaskkill /pid:604 /F

  5. 转】MyEclipse10安装Log4E插件

    原博文出自于:http://www.cnblogs.com/xdp-gacl/p/4231812.html 感谢! 一. Log4E插件下载 下载地址:http://log4e.jayefem.de/ ...

  6. Spark RDD概念学习系列之为什么会引入RDD?(一)

        为什么会引入RDD? 我们知道,无论是工业界还是学术界,都已经广泛使用高级集群编程模型来处理日益增长的数据,如MapReduce和Dryad.这些系统将分布式编程简化为自动提供位置感知性调度. ...

  7. linux下生成 SSH 公钥,用于GitHub

    ssh-keygen -t rsa -C <email> 参见 https://help.github.com/articles/generating-ssh-keys/ Then add ...

  8. c语言中用宏定义一个常量,数字后面带个U, L, F的含义

    转: c语言中数字后面带个U是什么意思?#define F_CPU 12000000U答:U表示该常数用无符号整型方式存储,相当于unsigned int;L表示该常数用长整型方式存储,相当于long ...

  9. ruby中实例变量、类变量等等的区别和联系

    ruby的变量有局部变量,全局变量,实例变量,类变量,常量. 1.局部变量 局部变量以一个小写字母开头或下划线开头 局部变量有局部作用域限制(比如一个block内),它的作用域起始于声明处,结束于该声 ...

  10. joj 2453 candy 网络流建图的题

    Problem D: Candy As a teacher of a kindergarten, you have many things to do during a day, one of whi ...