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. CMake 入门

    编写 CMakeLists.txt 首先编写 CMakeLists.txt 文件,并保存在与 main.cc 源文件同个目录下: # 单个源文件 # CMake 最低版本号要求 cmake_minim ...

  2. 【C#】如何创建xml文件以及xml文件的增、改

    增: using System; using System.Collections.Generic; using System.Linq; using System.Text.RegularExpre ...

  3. spring实例化bean的方式

    1.使用类构造器实现实例化(bean的自身构造器) <bean id = "orderService" class="cn.itcast.OrderServiceB ...

  4. Use weakref module in a cache or mapping

    The weakref module allows the Python programmer to create weak references to objects. In the followi ...

  5. bzoj3717: [PA2014]Pakowanie

    Time Limit: 90 Sec Memory Limit: 256 MBSubmit: 128 Solved: 43[Submit][Status][Discuss]Description 你有 ...

  6. js运动 缓冲运动

    <!DOCTYPE HTML> <HTML> <meta http-equiv="Content-Type" content="text/h ...

  7. dom 冒泡事件

    <!doctype html> <html> <head> <meta charset="utf-8"> <style> ...

  8. hive权威安装出现的不解错误!(完美解决)两种方法都可以

    以下两种方法都可以,推荐用方法一! 方法一: 步骤一: yum -y install mysql-server 步骤二:service mysqld start 步骤三:mysql -u root - ...

  9. Linux下的sort排序命令详解(一)

    1 sort的工作原理 sort将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次按ASCII码值进行比较,最后将他们按升序输出. [zookeeper@master rh]$ cat ...

  10. js中Number数字数值运算后值不对

    问题: 37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这样,两 ...