[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 ...
随机推荐
- 第二篇、Maven快速上手
1.目标 该篇主要是为了快速利用maven来构建工程,maven作为项目管理的工具已经得到极大程度的应用,很多开源项目都用maven来构建.如何建立 一个maven工程,如何导入别人的maven工程, ...
- c++ string用法
首先,为了在我们的程序中使用string类型,我们必须包含头文件 .如下: #include //注意这里不是string.h string.h是C字符串头文件 1.声明一个C++字符串 声明一个字 ...
- 根据打开页面加载不同Js
根据打开页面加载不同Js //根据打开页面加载不同JS $(document).ready(function(){ var href = document.URL; /*获取当前页面的URL*/ if ...
- apache 设置404页面
这几天用xampp搭建了一套环境,后来发现在网页访问出现404的时候xampp显示的内容不安全,把apache.php还有一些其它的版本都会显示 出来,所以想自己设置一个404的页面,在网上找了一些资 ...
- DDoS攻击
来自百度百科 分布式拒绝服务攻击编辑 分布式拒绝服务攻击(英文:Distributed Denial of Service,缩写:DDoS)亦称洪水攻击.顾名思义,即是利用网络上已被攻陷的电脑作为“僵 ...
- nopcommerce 二次开发
http://www.cnblogs.com/nopcommerce-b2c/ http://www.nopchina.net/ 数据库结构 http://www.xcode.me/open/docu ...
- Prime Path(素数筛选+bfs)
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9519 Accepted: 5458 Description The m ...
- WallsEveryDay 必应桌面壁纸
软件名:WallsEveryday 陈述: 无聊时写着玩的一个桌面壁纸的软件,壁纸是自动从必应下载,所以每天都会有新的. 在ubuntu上测试通过,windows上找了台win7测试通过,其他没测试. ...
- 如何在svn系统中使用git
如果正在使用svn,打算换到git,又暂时不想放弃已有的svn代码库,可以选择git-svn.说一说我自己从svn到git的经验吧. 开始 安装最新版本的git,从git 1.5.3以后支持git-s ...
- Implement Trie (Prefix Tree) ——LeetCode
Implement a trie with insert, search, and startsWith methods. Note:You may assume that all inputs ar ...