[Angular 2] Validation
Define a filed should has validation:
export class DemoFormSku {
myForm: ControlGroup;
sku: AbstractControl;
constructor(fb:FormBuilder) {
this.myForm = fb.group({
"sku": ["", Validators.required]
});
this.sku = this.myForm.controls['sku'];
} onSubmit(value){
console.log(value);
}
}
Form message
<div *ng-if="!myForm.valid"
class="bg-warning">Form is invalid</div>
Field message
<div *ng-if="!sku.valid"
class="bg-warning">SKU is invalid</div>
Field coloring
<div class="form-group" [class.has-error]="!sku.valid && sku.touched">
<label for="skuInput">SKU</label>
<input type="text"
class="form-control"
id="skuInput"
placeholder="SKU"
[ng-form-control]="myForm.controls['sku']">
</div>
Specific validation
<div *ng-if="myForm.hasError('required', 'sku')">
SKU is required
</div>
import {Component, View, FORM_DIRECTIVES, Validators, FormBuilder, NgIf} from 'angular2/angular2'; @Component({
selector: 'demo-form-sku'
})
@View({
directives: [FORM_DIRECTIVES, NgIf],
template: `
<div>
<h2>Demo Form: Sku</h2>
<!-- ngForm is attched to the form, and #f="form" form is also come from ngForm-->
<form [ng-form-model]="myForm"
(submit)="onSubmit(myForm.value)">
<div class="form-group" [class.has-error]="!sku.valid && sku.touched">
<label for="skuInput">SKU</label>
<input type="text"
class="form-control"
id="skuInput"
placeholder="SKU"
[ng-form-control]="myForm.controls['sku']">
</div>
<div *ng-if="!sku.valid"
class="bg-warning">SKU is invalid</div>
<button type="submit" class="btn btn-default">Submit
</button>
<div *ng-if="myForm.hasError('required', 'sku')">
SKU is required
</div> </form>
<div *ng-if="!myForm.valid"
class="bg-warning">Form is invalid</div>
</div>
`
}) export class DemoFormSku {
myForm: ControlGroup;
sku: AbstractControl;
constructor(fb:FormBuilder) {
this.myForm = fb.group({
"sku": ["", Validators.required]
});
this.sku = this.myForm.controls['sku'];
} onSubmit(value){
console.log(value);
}
}
[Angular 2] Validation的更多相关文章
- Angular 4+ 修仙之路
Angular 4.x 快速入门 Angular 4 快速入门 涉及 Angular 简介.环境搭建.插件表达式.自定义组件.表单模块.Http 模块等 Angular 4 基础教程 涉及 Angul ...
- ngVerify - 更高效的 angular 表单验证
ngVerify v1.5.0 a easy Angular Form Validation plugin.简洁高效的__angular表单验证插件__ See how powerful it.看看它 ...
- angular validation 使用总结
我由于制作登陆界面,用到了angular-validation,结合ng-cookies,实现记住账户密码的功能.文档是https://github.com/hueitan/angular-valid ...
- [Angular2 Form] Style Validation in Angular 2 Forms
Inputs using Angular 2’s ngModel automatically apply style classes of .ng-validand .ng-invalid each ...
- [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 ...
- [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 ...
- angular : ngModel 内部流程
angular 1.5 beta link NgModelController provides API for the ngModel directive. The controller conta ...
- 创建自定义的 Angular Schematics
本文对 Angular Schematics 进行了介绍,并创建了一个用于创建自定义 Component 的 Schematics ,然后在 Angular 项目中以它为模板演练了通过 Schemat ...
- [转]Angular: Hide Navbar Menu from Login page
本文转自:https://loiane.com/2017/08/angular-hide-navbar-login-page/ In this article we will learn two ap ...
随机推荐
- IoC模式(控制反转)(转)
转自:http://www.cnblogs.com/qqlin/archive/2012/10/09/2707075.html,写的很好,用C#代码解释控制反转,然后更进一步,提到依赖注入是控制反转的 ...
- PHP_EOL常量
PHP_EOL 换行符 unix系列用 \n windows系列用 \r\n mac用 \r PHP中可以用PHP_EOL来替代,以提高代码的源代码级可移植性 如: <?php echo PHP ...
- Python自动化运维之30、Flask框架
Flask 官网:http://flask.pocoo.org/ flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是 ...
- South入门教程
对于django自带的syncdb同步models和数据库的缺陷,所以我选择第三方的工具South. 1.安装South:pip install South 2.South设置: 把 south 加到 ...
- 长期支持版本(即不自动更新版本) - Flash Player 18.0.0.268
无意中发现,适合不喜欢折腾的朋友. 下载链接:(官方:http://www.adobe.com/cn/products/flashplayer/distribution3.html) (分流:http ...
- Laravel框架——自己写的类找不到
composer.json my model files are stored in directory of app\models, therefor "autoload": { ...
- Rust语言:安全地并发
http://www.csdn.net/article/2014-02-26/2818556-Rust http://www.zhihu.com/question/20032903 Rust是近两年M ...
- C#后台找不到前台html标签
没关系! 只要他在form表单里 , 咱在标签加上一个 runat="server"就可以在后台cs代码里找到他了
- oracle 查询dblink的方法
oracle 查询dblink的方法: SYSDBA登录, sys登录 SELECT * FROM SYS.link$;
- Unity NGUI的多分辨率适配
参考链接:http://blog.csdn.net/mfc11/article/details/17681429,作者:CSDN mfc11 1.NGUI默认的适配方式: NGUI默认是适配方式是根据 ...