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. 2017国家集训队作业[arc076d/f][Exhausted?]

    2017国家集训队作业[arc076d/f][Exhausted?] 题意: ​ 有\(N\)个人,\(M\)把椅子,给出\(...L_i.R_i\)表示第\(i\)个人可以选择编号为\(1\sim ...

  2. 禁止input输入空格

    仅适用于PC端:$("input").attr("onKeypress","javascript:if(event.keyCode == 32)eve ...

  3. C# Unable to load DLL 'WzCanDll.dll':找不到指定的模块

    一.打开app无法加载DLL 我用C++编写的DLL,然后用C#写的界面APP,在自己的电脑上打开没有问题,放在其它电脑上就出现无法加载DLL库的问题,一连接APP就会出现问题,如下图所示: 二.解决 ...

  4. ORM进阶:Hibernate的优劣对照

    hibernate是一种是轻量级的ORMapping框架.学过EntityFramework的.会感觉挺亲切的. 对于各种层次程序猿对数据库的设计: 小菜程序员这样做:首先考虑数据的存储,对于功能的实 ...

  5. 【D3 API 中文手冊】

    [D3 API 中文手冊] 声明:本文仅供学习所用,未经作者同意严禁转载和演绎 <D3 API 中文手冊>是D3官方API文档的中文翻译. 始于2014-3-23日,基于VisualCre ...

  6. 如何创建Hiren的BootCD USB磁盘 -- 制作U盘启动盘

    如何创建Hiren的BootCD USB磁盘 原文 https://www.wintips.org/how-to-create-hirens-bootcd-usb-disk/  本文基本是谷歌翻译 H ...

  7. WebService三大基本元素 SOAP WSDL UDDI

    转自:https://blog.csdn.net/hhooong/article/details/51763128 1.SOAP 即 Simple Object AccessProtocol 也就是简 ...

  8. div的标准盒模型和怪异盒模型

    (1)标准盒模型 标准盒模型宽高不会被padding和margin撑开 (2)怪异盒模型 怪异盒模型宽高会被padding和margin撑开

  9. UML类图与类图中的关系

    以下内容摘自<Java与模式> 在类与类之间,会有连线指明它们之间的关系.类和类.类和接口.接口和接口之间可以建立以下几种关系:一般化关系.关联关系.聚合关系.合成关系和依赖关系,这几种关 ...

  10. 有关Canvas的一点小事—图像绘制

    1.  使用canvas绘制图像 什么是图像?在js中它就是一个<img src=””>,<img>有两种接收图像信息的方法,一个是直接链接到图像地址,一个使用base64数据 ...