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的更多相关文章

  1. angualr Material Icons

    首先需要项目引入 angualr meterial icons的资源库 图标资源链接 https://klarsys.github.io/angular-material-icons/ <md- ...

  2. angualr 实现tab选项卡功能

    tab.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. [Angualr 2] Using FormBuilder

    There are two main functions we’ll use on FormBuilder: • control - creates a new Control• group - cr ...

  4. ng-clip angualr 的copy功能

    每次写博客都想由衷的给我的老大膜拜一番!以前刚开始做angular的项目的时候就有说要有点击复制的功能因为当时菜啊,不懂啊.也就没做,今天老大又给了我一个资料!“ng-clip”.跟着老大最大的收获就 ...

  5. angualr高级篇之elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别

    在angular的使用过程中我们经常用$rootScope.$new()为elem创建一个新的作用域scope,然后使用$compile(elem)(scope)编译这个含有指令的元素.那么这里传进去 ...

  6. windows 下运行angualr/material2 项目

    第一步:到github上clone  angular/material2 项目 第二步:npm install 第三步: 打开git bash (cmd 或 powershell 是无法成功运行该项目 ...

  7. angualr跨域访问配置

    浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了: 简单的解释就是相同域名,端口相同,协议 ...

  8. Angualr学习笔记

    0.安装即环境初始化 下载node至windows,点击安装,所有环境变量直接OK: linux下载tar后,解压,在/etc/profile的path路径下增加node执行路径: export PA ...

  9. 学习angualr之前需要了解的typeScript知识

    官网 : www.typescriptlang.org   1.编译型语言 2.强类型语言 3.真正的面向对象的语言: 有借口.有泛型.有枚举.有访问修饰符 AMD类型的面向对象的语言     npm ...

随机推荐

  1. 运用BeanUtils构建通用的查询 更新方法(个人拙作,不喜勿喷)

    ------------------------------------更新方法----------------------------------- public void update(Strin ...

  2. python3 遍历文件

    程序很简单,parent,dirnames,filenames分别表明当前目录下的文件夹数及文件数,然后通过os.wolk向深入遍历.   import os import os.path # thi ...

  3. iPhone、iPad默认按钮样式问题

    iPhone.iPad默认按钮样式问题 解决方法给按钮元素添加一个-webkit-appearance: none;具体代码 input[type="button"], input ...

  4. STM32学习笔记——DMA控制器(向原子哥学习)

    一.DMA简介 DMA,全称为:Direct Memory Access,即直接存储器访问,DMA 用来提供在外设和存储器之间或者存储器和存储器之间的高速数据传输.当 CPU 初始化这个传输动作,传输 ...

  5. Kendo UI for Angular 2 控件

    Kendo UI for Angular 2 控件 伴随着 Angular 2 的正式 release,Kendo UI for Angular 2 的第一批控件已经发布了,当前是 Beta 版本,免 ...

  6. AST抽象语法树

    抽象语法树简介 (一)简介 抽象语法树(abstract syntax code,AST)是源代码的抽象语法结构的树状表示,树上的每个节点都表示源代码中的一种结构,这所以说是抽象的,是因为抽象语法树并 ...

  7. BZOJ 1018 堵塞的交通

    Description 有一天,由于某种穿越现象作用,你来到了传说中的小人国.小人国的布局非常奇特,整个国家的交通系统可以被看成是一个2行C列的矩形网格,网格上的每个点代表一个城市,相邻的城市之间有一 ...

  8. ios入门之c语言篇——基本函数——3——判断日期是一年的第几天

    3.判断日期是一年的第几天 参数返回值解析: 参数: y:int,年份: m:int,月份 d:int,日期 返回值: sum:传入日期是当年的第几天: 函数解析: leapyear(y);判断y是不 ...

  9. Lua参考手册

    英文原版: http://www.lua.org/manual/5.1/ 中文版下面2个地址都有:一样的 manual.luaer.cn lua在线手册 lua参考手册Lua参考手册的中文翻译(云风翻 ...

  10. HNOI 2016 省队集训日记

    第一天 DeepDarkFantasy 从东京出发,不久便到一处驿站,写道:日暮里.  ——鲁迅<藤野先生> 定义一个置换的平方为对1~n的序列做两次该置换得到的序列.已知一个置换的平方, ...