[Angular2 Form] Reactive form: valueChanges, update data model only when form is valid
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的更多相关文章
- Python之路-(Django(csrf,中间件,缓存,信号,Model操作,Form操作))
csrf 中间件 缓存 信号 Model操作 Form操作 csrf: 用 django 有多久,我跟 csrf 这个概念打交道就有久了. 每次初始化一个项目时都能看到 django.middlewa ...
- django 用model来简化form
django里面的model和form其实有很多地方有相同之处,django本身也支持用model来简化form 一般情况下,我们的form是这样的 from django import forms ...
- HBase 数据模型(Data Model)
HBase Data Model--HBase 数据模型(翻译) 在HBase中,数据是存储在有行有列的表格中.这是与关系型数据库重复的术语,并不是有用的类比.相反,HBase可以被认为是一个多维度的 ...
- [Angular 2] Adding a data model
Instead of add todo as a string, we create a data model: export class TodoModel{ constructor( public ...
- 自定义 ASP.NET Identity Data Model with EF
One of the first issues you will likely encounter when getting started with ASP.NET Identity centers ...
- [转]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 ...
- 数据库系统概述(Data Model、DBMS、DBS、RDBS、Structured Query Language)
数据Data 描述事物的符号记录成为数据. 数据是数据库中存储的基本对象. 除了基本的数字之外.像图书的名称.价格.作者都可以称为数据. 将多种数据记录列成一张表.通过数据表管理数据. 每一行的数 ...
- 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 ...
- EF,ADO.NET Entity Data Model简要的笔记
1. 新建一个项目,添加一个ADO.NET Entity Data Model的文件,此文件会生成所有的数据对象模型,如果是用vs2012生的话,在.Designer.cs里会出现“// Defaul ...
随机推荐
- 2017国家集训队作业[arc076d/f][Exhausted?]
2017国家集训队作业[arc076d/f][Exhausted?] 题意: 有\(N\)个人,\(M\)把椅子,给出\(...L_i.R_i\)表示第\(i\)个人可以选择编号为\(1\sim ...
- 禁止input输入空格
仅适用于PC端:$("input").attr("onKeypress","javascript:if(event.keyCode == 32)eve ...
- C# Unable to load DLL 'WzCanDll.dll':找不到指定的模块
一.打开app无法加载DLL 我用C++编写的DLL,然后用C#写的界面APP,在自己的电脑上打开没有问题,放在其它电脑上就出现无法加载DLL库的问题,一连接APP就会出现问题,如下图所示: 二.解决 ...
- ORM进阶:Hibernate的优劣对照
hibernate是一种是轻量级的ORMapping框架.学过EntityFramework的.会感觉挺亲切的. 对于各种层次程序猿对数据库的设计: 小菜程序员这样做:首先考虑数据的存储,对于功能的实 ...
- 【D3 API 中文手冊】
[D3 API 中文手冊] 声明:本文仅供学习所用,未经作者同意严禁转载和演绎 <D3 API 中文手冊>是D3官方API文档的中文翻译. 始于2014-3-23日,基于VisualCre ...
- 如何创建Hiren的BootCD USB磁盘 -- 制作U盘启动盘
如何创建Hiren的BootCD USB磁盘 原文 https://www.wintips.org/how-to-create-hirens-bootcd-usb-disk/ 本文基本是谷歌翻译 H ...
- WebService三大基本元素 SOAP WSDL UDDI
转自:https://blog.csdn.net/hhooong/article/details/51763128 1.SOAP 即 Simple Object AccessProtocol 也就是简 ...
- div的标准盒模型和怪异盒模型
(1)标准盒模型 标准盒模型宽高不会被padding和margin撑开 (2)怪异盒模型 怪异盒模型宽高会被padding和margin撑开
- UML类图与类图中的关系
以下内容摘自<Java与模式> 在类与类之间,会有连线指明它们之间的关系.类和类.类和接口.接口和接口之间可以建立以下几种关系:一般化关系.关联关系.聚合关系.合成关系和依赖关系,这几种关 ...
- 有关Canvas的一点小事—图像绘制
1. 使用canvas绘制图像 什么是图像?在js中它就是一个<img src=””>,<img>有两种接收图像信息的方法,一个是直接链接到图像地址,一个使用base64数据 ...