[Angular2 Form] Style Validation in Angular 2 Forms

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, 2))}
}

input.ng-dirty.ng-valid.ng-touched{border-bottom: green 2px solid;
}
input.ng-invalid.ng-dirty.ng-touched{border: 2px solid red;
}

Github

转载于:https://www.cnblogs.com/Answer1215/p/5914088.html

[Angular2 Form] Style Validation in Angular 2 Forms相关推荐

Angular Reactive Forms -- Model-Driven Forms响应式表单
Angular 4.x 中有两种表单: Template-Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 ) 官方文档:https://v2.angul ...
angular2 form reset
<div class="col-sm-8 pull-right text-danger" [hidden]="course.valid || course.unto ...
ExtJS入门教程03，form中怎能没有validation
接上篇内容,我们在学会extjs form的基本用法之后,今天我们来看看extjs form的validation功能. 必填项,就是不能为空(allowBlank) 效果: 代码: {xtype: ...
Angular 4.x 自定义表单控件
当我们打算自定义表单控件前,我们应该先考虑一下以下问题: 是否已经有相同语义的 native (本机) 元素?如:<input type="number"> 如果有,我 ...
Spring Security和Angular教程
Spring Security和Angular教程 (一)安全的单页应用程序在本教程中,我们展示了Spring Security,Spring Boot和Angular的一些很好的功能,它们协同工作 ...
angular基础学习
angular基础学习核心一. angular环境搭建 1. 安装前准备: 1.1 安装nodejs 1.2 安装 cnpm, 尽量不要使用 1.3 使用npm/cnpm命令安装angular/c ...
angular过滤字符_如何使用Angular和Azure计算机视觉创建光学字符读取器
angular过滤字符介绍 (Introduction) In this article, we will create an optical character recognition (OCR) ...
angular 命令行项目_Angular命令行界面介绍
angular 命令行项目 Angular is closely associated with its command-line interface (CLI). The CLI streamlin ...
通过forms来创建用户注册
注册通过django的Form来生成标签 form主要是可以保存数据,也可以生成标签,对于登录和注册来说使用方便下面创建了forms.py模块,然后倒入这个模块到views里面,这样是为了后面的好 ...

[Angular2 Form] Style Validation in Angular 2 Forms

[Angular2 Form] Style Validation in Angular 2 Forms相关推荐

最新文章

热门文章