[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 ...
随机推荐
- null和undefined的区别
不同之处: null是js语言的关键字,它表示一个特殊值,常用来描述“空值”.对null执行typeof运算,结果返回字符串“object”,也就是说,可以将null认为是一个特殊的对象值,含义是“非 ...
- ecshop数据库操作类
ECShop v2.7.2没有使用一些开源的数据库操作类,比如adodb或者PEAR,而是封装了自己的实现. 好处:实现非常轻量,只有一个文件,27Kb,大大减小了分发包的文件大小. 当网站需要做me ...
- MySql数据库1【概念】
[mysql] mysql是目前最主流的跨平台.开放源代码的关系型数据库,由瑞曲的mysql ab公司开发,已经被SUN公司收购,标识是一只名为sakila的海豚,代表mysql的速度.能力.精确优秀 ...
- PHP之验证码识别
首先推荐几篇有关验证码识别的文章,觉得不错 php实现验证码的识别(初级篇) 关于bp神经网格识别验证码 一.思路 碰见一个验证码,如果我们想要识别它,我们需要的是做什么呢? 我们先观察几个验证码.. ...
- 第一个程序点亮一个LED灯
#include <reg52.h> // 引用52包文件 可以理解为命名空间 sbit P1_0 = P1^0; // 定义P1管脚0 void main() ...
- plot的实践。
from matplotlib import pyplot as plt data = np.loadtxt(r'C:\Users\yinggang\Desktop\1\a.txt') x,y,z = ...
- Title of live Writer
Test From Windows Live Writer **markdown bold**
- Oracle OCI-22053:溢出错误
Oracle 数值数据类型最多可存储 38 个字节的精度.当将 Oracle 数值转换 为公共语言运行库数据类型时,小数点后边的位数可能过多,这会导致此错误. 查询29万笔数据,报此错误,分析应该 ...
- Eclipse maven git
http://www.blogjava.net/youxia/archive/2013/12/29/408182.html
- Android NetWorkUtil
package com.android.hcframe.netdisc.util; import java.io.BufferedReader; import java.io.InputStreamR ...