Inputs using Angular 2’s ngModel automatically apply style classes of .ng-validand .ng-invalid each time the input’s validity changes. These classes allow you easily add your own styles simply by declaring the styles in your Componentdecorator.

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-message',
templateUrl: './message.component.html',
styleUrls: ['./message.component.css']
})
export class MessageComponent implements OnInit { message = "Hello"; constructor() { } ngOnInit() {
} onSubmit(formValue){
console.log("formValue", JSON.stringify(formValue, null, ))
}
}
input.ng-dirty.ng-valid.ng-touched{
border-bottom: green 2px solid;
}
input.ng-invalid.ng-dirty.ng-touched{
border: 2px solid red;
}

Github

[Angular2 Form] Style Validation in Angular 2 Forms的更多相关文章

  1. [Angular2 Form] Group Inputs in Angular 2 Forms with ngModelGroup

    The ngModelGroup directive allows you to group together related inputs so that you structure the obj ...

  2. [Angular2 Form] Display Validation and Error Messaging in Angular 2

    Angular 2’s ngModel provides error objects for each of the built-in input validators. You can access ...

  3. [Angular2 Router] Style the Active Angular 2 Navigation Element with routerLinkActive

    You can easily show the user which route they are on using Angular 2’s routerLinkActive. Whenever a ...

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

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

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

  8. Adding Validation to our Album Forms 添加类属性的一些验证特性

    Adding Validation to our Album Forms We’ll use the following Data Annotation attributes: Required – ...

  9. shit element ui & form password validation

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

随机推荐

  1. 【转】Bellman_ford算法

    原文链接:http://www.cnblogs.com/Jason-Damon/archive/2012/04/21/2460850.html 摘自百度百科 Bellman-ford算法是求含负权图的 ...

  2. JAVA分析html算法(JAVA网页蜘蛛算法)

    近来有些朋友在做蜘蛛算法,或者在网页上面做深度的数据挖掘.但是遇到复杂而繁琐的html页面大家都望而却步.因为很难获取到相应的数据. 最古老的办法的是尝试用正则表达式,估计那么繁琐的东西得不偿失,浪费 ...

  3. MySQL DATE_SUB() 函数

    定义和用法 DATE_SUB() 函数从日期减去指定的时间间隔. 语法 DATE_SUB(date,INTERVAL expr type) date 参数是合法的日期表达式.expr 参数是您希望添加 ...

  4. (转)QR二维码生成及原理

    二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型:比如:字符,数字, ...

  5. proguard 混淆android代码

    官网 http://proguard.sourceforge.net/#manual/examples.html android 2.3后,新建的project默认就有一个project.proper ...

  6. 安装 nodejs图像处理模块 sharp

    sudo npm install sharp 报错: ERROR: Please install libvips by running: brew install homebrew/science/v ...

  7. 转】从源代码剖析Mahout推荐引擎

    原博文出自于: http://blog.fens.me/mahout-recommend-engine/ 感谢! 从源代码剖析Mahout推荐引擎 Hadoop家族系列文章,主要介绍Hadoop家族产 ...

  8. 【转】Mysql进程管理

    mysql> show processlist; +----+------+-----------+------+---------+------+-------+--------------- ...

  9. HD2086A1 = ?

    Problem Description 有如下方程:Ai = (Ai-1 + Ai+1)/2 - Ci (i = 1, 2, 3, .... n). 若给出A0, An+1, 和 C1, C2, .. ...

  10. How Tomcat Works(二)

    我们这些可怜虫,只有沿着大神的思路,这样我们才能进步得更快:因为我们不是跟大神处于同一级别上.所以我这里是参考<How Tomcat Works>这本英文版的大作来理解tomcat的工作原 ...