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. MySQL_PHP学习笔记_2015_0923_MySQL如何开启事件

    1. 查看事件状态>>>>>>>>>>>>>>>>>>>>>>> ...

  2. 独立开发游戏越来越容易:Unity 发布旗下的最新游戏引擎 Unity 5,依然有免费版(转)

    独立开发者开发游戏正变得越来越容易,因为在游戏设计中很多吃力不讨好的工作可以直接采用像 Epic Games 或 Unity Technologies 这样的游戏引擎来解决.而这几天,游戏引擎商们先后 ...

  3. just test Gson

    just test Gson code package com.qilin.test; import com.google.gson.Gson; import org.apache.commons.l ...

  4. 移动端和web端前端UI库—Frozen UI、WeUI、SUI Mobile

    web http://www.pintuer.com/ 拼图 http://www.h-ui.net/ http://www.layui.com/  很厉害的一个个人产品 http://amazeui ...

  5. 一个介绍webrtc的国外网址

    http://www.html5rocks.com/en/tutorials/webrtc/basics/

  6. 事件委托(event delegation)

    事件委托给我带来的第一印象是,如果可以的话请尝试得经常使用它,性能好! 通过字符串拼接后,并进行DOM插入,不会复制事件,此时需要进行事件委托了!!! 优点 事件委托对于web应用程序的性能有如下几个 ...

  7. 【原】创建Hive表,分号分隔符“;”引起的异常

    [障碍再现] 在创建支持Map数据结构的Hive表时,抛出如下异常 hive> create table tab_map(name string,info map<string,strin ...

  8. c/c++,输入一个字符 2014-11-20 07:00 30人阅读 评论(0) 收藏

    getch().getche()和getchar()函数     (1) getch()和getche()函数     这两个函数都是从键盘上读入一个字符.其调用格式为:      getch(); ...

  9. lib和dll的例子

    .dll和.lib的区别 lib是静态库,dll一般是动态链接库(也有可能是别的)比如要编译个exe,lib在编译的时候就会被编译到exe里,作为程序的一部分而dll是不被编译进去,是运行的时候才调入 ...

  10. sql server转移tempdb数据库的物理存放位置

    转移前将原来的文件备份一下   将 tempdb 从其在磁盘上的当前位置移动到其他磁盘位置.由于每次启动 MSSQLSERVER 服务时都会重新创建 tempdb,因此不需要从物理意义上移动数据和日志 ...