[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 ...
随机推荐
- 亲测有效的解决在vue cli@3 create 命令执行后 node-sass无法安装上的问题
在使用Vue cli@3 搭建工程手脚架的过程中.当我们选择了采用 sass 处理 css 编译.在使用vue create test 命令行执行到最后.会到以下这步:然后开始报错: Download ...
- python自学群里遇到的小题汇总
题目一: 请使在3秒内计算出一组的数据,偶数在奇数前(注意不使用for while等循环的方法)格式如下1,2,3,4,5,6,7,8,9,10输出结果是2,1,4,3,6,5,8,7,10,9 解决 ...
- HDU 1533 Going Home(KM完美匹配)
HDU 1533 Going Home 题目链接 题意:就是一个H要相应一个m,使得总曼哈顿距离最小 思路:KM完美匹配,因为是要最小.所以边权建负数来处理就可以 代码: #include <c ...
- BZOJ 1507 NOI2003 Editor Splay
题目大意: 1.将光标移动到某一位置 2.在光标后插入一段字符串 3.删除光标后的一段字符 4.输出光标后的一段字符 5.光标-- 6.光标++ 和1269非常像的一道题,只是弱多了 几个问题须要注意 ...
- BASH 文本模版的简单实现 micro_template_compile
详细代码 ############################### # # Funciton: micro_template_compile # # Parameter: # [1] => ...
- mysql 不能启动的两种错误提示及解决方法
在linux系统中安装mysql服务器详细步骤并解决ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passw ...
- windows防火墙开放zabbix端口(批处理)
windows系统在防火墙开启的情况下,打开zabbix端口(10050与10051) 可以手动添加规则,也可以使用批处理生成. 一.下面先介绍批处理 netsh advfirewall firewa ...
- Spring学习总结(6)——Spring之核心容器bean
一.Bean的基础知识 1.在xml配置文件中,bean的标识(id 和 name) id:指定在benafactory中管理该bean的唯一的标识.name可用来唯一标识bean 或给bean起别名 ...
- 洛谷 P1104 生日
P1104 生日 题目描述 cjf君想调查学校OI组每个同学的生日,并按照从大到小的顺序排序.但cjf君最近作业很多,没有时间,所以请你帮她排序. 输入输出格式 输入格式: 有2行, 第1行为OI组总 ...
- ES5, ES6, ES2016, ES.Next: JavaScript 的版本是怎么回事?
原网址:http://huangxuan.me/2015/09/22/js-version/ JavaScript 有着很奇怪的命名史. 1995 年,它作为网景浏览器(Netscape Naviga ...