[Angualr 2] Watch for changes
You can watch for form / control changes by using .valueChanges.observe({...}):
this.sku.valueChanges.observer({
next: (value)=>{
console.log("sku has changed to: " , value);
}
}) this.myForm.valueChanges.observer({
next: (value)=>{
console.log("form has change to: ",value);
}
})
Code:
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"
#sku = "form"
placeholder="SKU"
[ng-form-control]="myForm.controls['sku']">
</div>
<div *ng-if="!sku.control.valid"
class="bg-warning">SKU is invalid</div>
<button type="submit" class="btn btn-default">Submit
</button>
<div *ng-if="sku.control.hasError('invalidSku')">
SKU is required
</div> </form>
<div *ng-if="!myForm.valid"
class="bg-warning">Form is invalid</div>
</div>
`
}) export class DemoFormSku {
myForm: ControlGroup;
constructor(fb:FormBuilder) {
this.myForm = fb.group({
"sku": ["", Validators.compose([
Validators.required,
skuValidator
])]
});
this.sku = this.myForm.controls['sku']; this.sku.valueChanges.observer({
next: (value)=>{
console.log("sku has changed to: " , value);
}
}) this.myForm.valueChanges.observer({
next: (value)=>{
console.log("form has change to: ",value);
}
})
} onSubmit(value){
console.log(value);
} function skuValidator(control){
if(!control.value.match(/^123/)){
return {invalidSku: true};
}
}
}
[Angualr 2] Watch for changes的更多相关文章
- angualr Material Icons
首先需要项目引入 angualr meterial icons的资源库 图标资源链接 https://klarsys.github.io/angular-material-icons/ <md- ...
- angualr 实现tab选项卡功能
tab.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- [Angualr 2] Using FormBuilder
There are two main functions we’ll use on FormBuilder: • control - creates a new Control• group - cr ...
- ng-clip angualr 的copy功能
每次写博客都想由衷的给我的老大膜拜一番!以前刚开始做angular的项目的时候就有说要有点击复制的功能因为当时菜啊,不懂啊.也就没做,今天老大又给了我一个资料!“ng-clip”.跟着老大最大的收获就 ...
- angualr高级篇之elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别
在angular的使用过程中我们经常用$rootScope.$new()为elem创建一个新的作用域scope,然后使用$compile(elem)(scope)编译这个含有指令的元素.那么这里传进去 ...
- windows 下运行angualr/material2 项目
第一步:到github上clone angular/material2 项目 第二步:npm install 第三步: 打开git bash (cmd 或 powershell 是无法成功运行该项目 ...
- angualr跨域访问配置
浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了: 简单的解释就是相同域名,端口相同,协议 ...
- Angualr学习笔记
0.安装即环境初始化 下载node至windows,点击安装,所有环境变量直接OK: linux下载tar后,解压,在/etc/profile的path路径下增加node执行路径: export PA ...
- 学习angualr之前需要了解的typeScript知识
官网 : www.typescriptlang.org 1.编译型语言 2.强类型语言 3.真正的面向对象的语言: 有借口.有泛型.有枚举.有访问修饰符 AMD类型的面向对象的语言 npm ...
随机推荐
- css样式积累
1.圆角: border-radius:16px 16px 16px 16px; 2透明度: filter: alpha(opacity=80); ...
- 关于css float 属性以及position:absolute 的区别。
1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...
- php之框架增加日志记录功能类
<?php /* 思路:给定文件,写入读取(fopen ,fwrite……) 如果大于1M 则重写备份 传给一个内容, 判断大小,如果大于1M,备份 小于则写入 */ class Log{ // ...
- python中归并排序
# coding=UTF-8 #!/usr/bin/python import sys def merge(nums, first, middle, last): "merge" ...
- Python使用纯真年代数据库qqwry.dat转换物理位置
PS:网上直接找的,贴出来,方便以后随时用,感谢分享的人. #!/usr/bin/python #encoding: utf-8 import socket import codecs import ...
- 搭建一个 简易的php版 todolist
我记得以前使用 wunderlist 但是国外..后来用了半年. 挺方便的.但是.后来慢慢忘了这工具存在 缺少了todolist.效率折半.. so.我搭建了个简单的todolist. :mytin ...
- hadoop 2.2.0 集群部署 坑
注意fs.defaultFS为2..0新的变量,代替旧的:fs.default.name hadoop 2.2.0 集群启动命令:bin/hdfs namenode -formatsbin/start ...
- c# appdomain
http://www.cnblogs.com/Terrylee/archive/2005/11/28/285809.html
- BZOJ 1207 打鼹鼠
Description 鼹鼠是一种很喜欢挖洞的动物,但每过一定的时间,它还是喜欢把头探出到地面上来透透气的.根据这个特点阿Q编写了一个打鼹鼠的游戏:在一个n*n的网格中,在某些时刻鼹鼠会在某一个网格探 ...
- [BC Round#26] Card 【各种水】
题目链接:HDOJ - 5159 这道题的做法太多了..BC的第二题也是可以非常水的.. 算法一 我在比赛的时候写的算法是这样的.. 预处理出所有的答案,然后对于每个询问直接输出. 询问 (a, b) ...