Angular Reactive Form - 填充表单模型
setValue
使用setValue,可以通过传递其属性与FormGroup后面的表单模型完全匹配的数据对象来一次分配每个表单控件值。
在分配任何表单控件值之前,setValue方法会彻底检查数据对象。
它不会接受与FormGroup结构不匹配的数据对象,或者缺少组中任何控件的值。 这样,如果您有打字错误或嵌套控件错误,它可以返回有用的错误消息。 patchValue将默认失败。
另一方面,setValue将捕获错误并清楚地报告错误。
请注意,很多数据模型(data model)可以直接作为setValue的参数,只要它们的形状类似于组件的FormGroup结构。
patchValue
使用patchValue,您可以通过提供一个键/值对的对象来为仅感兴趣的控件分配值到FormGroup中的特定控件。
使用patchValue,您可以更灵活地应对大量不同的数据和表单模型。 但是与setValue不同,patchValue无法检查缺少的控件值,并且不会引起有用的错误。
何时设置form模型的值(ngOnChanges)
//类
//@Input() connection: Connection
//implements OnChanges
ngOnChanges() {
if (this.validateForm) {
this.validateForm.patchValue({
connection: {
name: this.connection.name,
connectionType: this.connection.connectionType
},
options: this.connection.options,
description: this.connection.description,
properties: this.connection.options.properties
});
this.validateForm.valueChanges.subscribe((data) => {
console.log('Form changes', data);
});
}
}
链接:http://www.jianshu.com/p/3c97d908af47
Angular Reactive Form - 填充表单模型的更多相关文章
- Angular使用总结 --- 模型驱动表单
模型驱动表单 之前有篇博文总结了 模版驱动表单 , 以及 模版驱动表单的自定义校验 , 本篇总结下模型驱动表单. 与模版驱动表单是不同的编程思路,偏向于数据模型.先在组件中建立表单控件的对象树,再绑定 ...
- Yii表单模型使用及以数组形式提交表单数据
按Yii文档里的描述,Yii在处理表单的一般过程是: 创建表单对应的模型类,设置字段验证规则 创建表单提交对应的action,处理提交的内容 在视图中创建表单form 在刚刚的一个小项目里,想使用aj ...
- 去掉chrome记住密码后自动填充表单的黄色背景
chrome表单自动填充后,input文本框的背景会变成黄色的,通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对 ...
- ASP。NET Web表单模型,部分呈现和事件
下载EventExample.zip - 41.33 KB 下载EventandAjaxExample.zip - 41.94 KB 介绍 通过参考ASP获得Web应用程序环境及其约束的概述.NET ...
- 解析:使用easyui的form提交表单,在IE下出现类似附件下载时提示是否保存的现象
之前开发时遇到的一个问题,使用easyui的form提交表单,在Chrome下时没问题的,但是在IE下出现类似附件下载时提示是否保存的现象. 这里记录一下如何解决的.其实这个现象不光是easyui的f ...
- selenium如何解决IE自动填充表单问题
有时候用selenium会碰到自动填充表单的问题,如输入用户名后,密码自动填充,此时再填充密码会导致登录失败,解决办法:每个输入框都调用clear()方法
- 阻止form空表单提交----JavaScript
网上看到很不错的阻止form空表单提交 第一种方法 <div class="warp"> <h2>登录到pfan空间</h2> <p> ...
- form注册表单圆角 demo
form注册表单圆角 <BODY> <div class="form"> <ul class="list"> <li& ...
- Form提交表单页面不跳转
1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
随机推荐
- A/B_test改变新旧网页 观察用户的引流效果
代码处:https://github.com/xubin97/Data-analysis_exp2 分析A/B测试结果 目录 简介 I - 概率 II - A/B 测试 简介 首先这个项目数据来自某公 ...
- 通过Visual Studio 的“代码度量值”来改进代码质量
1 软件度量值指标 1.1 可维护性指数 表示源代码的可维护性,数值越高可维护性越好.该值介于0到100之间.绿色评级在20到100之间,表明该代码具有高度的可维护性:黄色评级在10到19之间,表示该 ...
- C#获取Url不同路径的方法大全
在 C# 中,用 Request 对象来获取 Url 的各种路径,包括上一页 Url.域名.绝对路径.相对路径和物理路径.虽然在某些情况下,无法获取到 Url,但可以获取到大部分情况下的 Url,下 ...
- 【SSH网上商城项目实战22】获取银行图标以及支付页面的显示
转自: https://blog.csdn.net/eson_15/article/details/51452243 从上一节的小demo中我们搞清楚了如何跟易宝对接以及易宝的支付流程.这一节 ...
- sql server web管理软件
Sql server目前虽然没有mysql用户量大,但是微软的产品在易用性方面还是很不错的,有些政务类的项目还是用 Sql server数据库的, 目前有一款Sql server的web管理工具Tre ...
- HDU 2045 RPG难题
http://acm.hdu.edu.cn/showproblem.php?pid=2045 这道题也是用倒推: 先假设前n-2个块都已经涂好,涂第n-1块时有以下两种情况: 1.n-1和1相同,则n ...
- 使用jQuery的validation插件实现表单校验
前端表单校验: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 有关动态规划(主要是数位DP)的一点讨论
动态规划(dynamic programming)是运筹学的一个分支,是求解决策过程(decision process)最优化的数学方法.20世纪50年代初美国数学家在研究多阶段决策过程的优化问题时, ...
- LintCode2016年8月8日算法比赛----等价二叉树
等价二叉树 题目描述 检查两棵二叉树是否等价.等价意思是说,首先两棵二叉树必须拥有相同的结构,并且每个对应位置上的节点上的数据相等. 样例 1 1 / \ / \ 2 2 and 2 2 / / 4 ...
- 解决 客户端连接 mysql5.7 Plugin 'mysql_native_plugin' is not loaded错误
进入mysql数据库,修改数据库的内容 1, use mysql; 2,update user set authentication_string="" where User= ...