For each formBuild, formControl, formGroup they all have 'valueChanges' prop, which is an Observable.

  reactiveForm: FormGroup;
video: Video; constructor(fb: FormBuilder) {
this.reactiveForm = fb.group({
// title <-- formControlName="title"
title: [
'Title', // <-- Default value
[
Validators.required,
Validators.minLength()
] // <-- Validations
],
duration: [
,
[
Validators.required,
Validators.pattern('[0-9]+')
]
],
description: [
'Description',
[Validators.required]
]
}); this.reactiveForm.valueChanges
.filter( x => this.reactiveForm.valid)
.map(value => new Video(value.title, value.duration, value.description))
.do(formValue => console.log(formValue))
.subscribe((video) => {
this.video = video;
})
class Video {
constructor(
private title: string,
private duration: number,
private description: string
){ }
}

If you want to only update form data model when form is valid, you can do:

.filter( x => this.reactiveForm.valid)

Reactive form is very useful when you want to do some background task without block user in the ui.

[Angular2 Form] Reactive form: valueChanges, update data model only when form is valid的更多相关文章

  1. Python之路-(Django(csrf,中间件,缓存,信号,Model操作,Form操作))

    csrf 中间件 缓存 信号 Model操作 Form操作 csrf: 用 django 有多久,我跟 csrf 这个概念打交道就有久了. 每次初始化一个项目时都能看到 django.middlewa ...

  2. django 用model来简化form

    django里面的model和form其实有很多地方有相同之处,django本身也支持用model来简化form 一般情况下,我们的form是这样的 from django import forms ...

  3. HBase 数据模型(Data Model)

    HBase Data Model--HBase 数据模型(翻译) 在HBase中,数据是存储在有行有列的表格中.这是与关系型数据库重复的术语,并不是有用的类比.相反,HBase可以被认为是一个多维度的 ...

  4. [Angular 2] Adding a data model

    Instead of add todo as a string, we create a data model: export class TodoModel{ constructor( public ...

  5. 自定义 ASP.NET Identity Data Model with EF

    One of the first issues you will likely encounter when getting started with ASP.NET Identity centers ...

  6. [转]Creating an Entity Framework Data Model for an ASP.NET MVC Application (1 of 10)

    本文转自:http://www.asp.net/mvc/overview/older-versions/getting-started-with-ef-5-using-mvc-4/creating-a ...

  7. 数据库系统概述(Data Model、DBMS、DBS、RDBS、Structured Query Language)

    数据Data 描述事物的符号记录成为数据. 数据是数据库中存储的基本对象.   除了基本的数字之外.像图书的名称.价格.作者都可以称为数据. 将多种数据记录列成一张表.通过数据表管理数据. 每一行的数 ...

  8. Data Management Technology(2) -- Data Model

    1.Data Model Model Is the abstraction of real world Reveal the essence of objects, help people to lo ...

  9. EF,ADO.NET Entity Data Model简要的笔记

    1. 新建一个项目,添加一个ADO.NET Entity Data Model的文件,此文件会生成所有的数据对象模型,如果是用vs2012生的话,在.Designer.cs里会出现“// Defaul ...

随机推荐

  1. RLF。HRLF解释

  2. 微信小程序从零开始开发步骤(五)轮播图

    上一章完成页面自定义分享,这一章来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. Swiper是滑动特效插件,面向手机.平板电脑等移动终端.能实现触屏焦点图.触屏Tab切换.触屏多图切换等常 ...

  3. PLSQL乱码&TNS-12557: protocol adapter not loadable解决

    PLSQL乱码&TNS-12557: protocol adapter not loadable解决 PLSQL乱码&TNS-12557: protocol adapter not l ...

  4. Oracle与MySQL的转化差异

    1.nvl函数.        Oracle 中 : nvl (join_count , 0)        MySQL中:if(join_count is null,'0',join_count)  ...

  5. IOS越狱开发错误解决

      Questions: haseScriptExecution Run\ Script /Users/jun/Library/Developer/Xcode/DerivedData/ButtonMa ...

  6. 【Cocos2d-x 017】 多分辨率适配全然解析

    转:http://blog.csdn.net/w18767104183/article/details/22668739 文件夹从Cocos2d-x 2.0.4開始,Cocos2d-x提出了自己的多分 ...

  7. 如果笔记本的 WIN7 运行很卡,请尝试运行这些批处理

    如果笔记本的 WIN7 运行很卡,请尝试运行这些批处理 WIN7是不是很卡?关掉下列服务吧 @echo off rem AppXSvc 为部署应用商店应用程序提供基础结构支持 rem BITS 微软的 ...

  8. gridview-selector的设置

    其实它是跟listview相似的,如果你看下它跟listview的继承关系,就很容易理解了 public class GridView extends AbsListView { /** * Disa ...

  9. Vue 的 createElement 函数的参数问题的小笔记

    官方文档的说明. 第二个参数的值是要生成的标签的属性数据.点击查看详情. 第三个参数则是组件标签内的数据,数据里面的内容会渲染在第一个参数的标签内.通常会在此指定各插槽 slot 对应的位置,也可以在 ...

  10. Cts框架解析(1)-windows下cts配置

    环境搭建 下载 cts工具的下载地址:http://source.android.com/compatibility/downloads.html windows选择Android4.4 R3 Com ...