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 - 填充表单模型的更多相关文章

  1. Angular使用总结 --- 模型驱动表单

    模型驱动表单 之前有篇博文总结了 模版驱动表单 , 以及 模版驱动表单的自定义校验 , 本篇总结下模型驱动表单. 与模版驱动表单是不同的编程思路,偏向于数据模型.先在组件中建立表单控件的对象树,再绑定 ...

  2. Yii表单模型使用及以数组形式提交表单数据

    按Yii文档里的描述,Yii在处理表单的一般过程是: 创建表单对应的模型类,设置字段验证规则 创建表单提交对应的action,处理提交的内容 在视图中创建表单form 在刚刚的一个小项目里,想使用aj ...

  3. 去掉chrome记住密码后自动填充表单的黄色背景

    chrome表单自动填充后,input文本框的背景会变成黄色的,通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对 ...

  4. ASP。NET Web表单模型,部分呈现和事件

    下载EventExample.zip - 41.33 KB 下载EventandAjaxExample.zip - 41.94 KB 介绍 通过参考ASP获得Web应用程序环境及其约束的概述.NET ...

  5. 解析:使用easyui的form提交表单,在IE下出现类似附件下载时提示是否保存的现象

    之前开发时遇到的一个问题,使用easyui的form提交表单,在Chrome下时没问题的,但是在IE下出现类似附件下载时提示是否保存的现象. 这里记录一下如何解决的.其实这个现象不光是easyui的f ...

  6. selenium如何解决IE自动填充表单问题

    有时候用selenium会碰到自动填充表单的问题,如输入用户名后,密码自动填充,此时再填充密码会导致登录失败,解决办法:每个输入框都调用clear()方法

  7. 阻止form空表单提交----JavaScript

    网上看到很不错的阻止form空表单提交 第一种方法 <div class="warp"> <h2>登录到pfan空间</h2> <p> ...

  8. form注册表单圆角 demo

    form注册表单圆角 <BODY> <div class="form"> <ul class="list"> <li& ...

  9. Form提交表单页面不跳转

    1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

随机推荐

  1. jQuery几个易混淆之处(参考《众妙之门》及相关博客)

    parent() && parents() && closest() 这三个方法都与沿着DOM向上导航有关,在由选择器返回的元素上方,匹配父元素或之前的祖先元素,但是每 ...

  2. C# 之正则表达式运用

    C#正则验证大全 Regex.IsMatch()正则表达式验证 需要引入命名空间 using System.Text.RegularExpressions;    #region 验证文本框输入为数字 ...

  3. 九、sparkStream的scala示例

    简介 sparkStream官网:http://spark.apache.org/docs/latest/streaming-programming-guide.html#overview spark ...

  4. js中数组, JSON的与字符串的处理

    1. JSON转字符串 var jsonStr = {"name": "xiaoming", "sex": "男"} J ...

  5. Shiro官方快速入门10min例子源码解析框架2-Session

    Shiro自身维护了一套session管理组件,它可以独立使用,并不单纯依赖WEB/Servlet/EJB容器等环境,使得它的session可以任何应用中使用. 2-Session)主要介绍在quic ...

  6. 【SSH网上商城项目实战17】购物车基本功能的实现

    转自:https://blog.csdn.net/eson_15/article/details/51418350 上一节我们将商品的详细页面做完了,并使用了Hibernate的二级缓存加载详细页面来 ...

  7. .NET Core是什么

    对于开发人员,把C#语言和.NET描述为最重要的新技术一点都不夸张.NET提供了一种环境.在这种环境中,可以开发在Windows上运行的几乎所有应用程序.如:编写Web页面.WPF应用程序.REST ...

  8. Vuejs入门级简单实例

    Vue作为2016年最火的框架之一,以其轻量.易学等特点深受大家的喜爱.今天简单介绍一下Vue的使用. 首先,需要在官网下载vuejs,或者直接用cdn库.以下实例使用Vue实现数据绑定与判断循环: ...

  9. 关于 webpack 跨域

    一.使用  http-proxy-middleware  代理 安装 http-proxy-middleware 依赖 在src 目录下 新建一个 setupProxy.js文件 // 引用依赖 va ...

  10. Vue.js学习(常用指令)

    Vue.js的指令是以v-开头,它们用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性. 本文参考:htt ...