1、要使用Angular自带的表单控制需要先引入相关模块(.ts文件):

 import { FormGroup, //表单对象类
       FormBuilder, //表单生成工具类
       Validators} //表单验证类
from "@angular/forms";

2、然后定义一个FormGroup对象,并且对它进行初始化(.ts文件):

 public advForm: FormGroup;
 this.advForm = this.formBuilder.group({
selAdvertiser:[''],
disAdvertiser:[''],
adv_cont_title:[''],
adv_cont_name:[''],
adv_email: ['', Validators.pattern("^([A-Za-z0-9!#\$%&'\*\+=\?\^_`\{\|\}~-]+[\.]?)+@([A-Za-z0-9]+[\.])+[A-Za-z]{2,4}$")],
adv_tel: ['', Validators.pattern('[^A-Za-z]+$')],
adv_fax: ['', Validators.pattern('[^A-Za-z]+$')],//使用正则表达式进行校验
proposal_num:[''],
contract_num:[''],
proposal_ver:[''],
contract_ver:[''],
package_name:[''],
description:[''],
deadline:[''],
period:[''],
agt_letter:[''],
credit_ass:['']
});

3、在模版页面使用后台已定义并初始化好的表单对象:

<div id="DocumentPanel" class="panel-collapse collapse in show" [formGroup]="advForm">
...
<div class="form_group_col">
<div><label class="ars-form-label">
<input type="checkbox" [disabled]="!edit_mode" class="form-checkbox" value="Y"
formControlName="agt_letter" />Agency
Appointment Letter</label>
</div>
</div>
...
</div>

可以看到上面的例子,外层的<div>使用了表单formGroup对象advForm,内部的<input>元素使用formControlName="agt_letter"来表明这个表单元素是对象FormGroup对象中的advForm(advForm实际上是FormController对象,只是上面使用了FormBuilder自动生成了)。

4、在模版页面使用表单验证的方法:

 <div class="">
<div class="error-message" *ngIf="agtForm.controls['agt_email'].invalid">must be Email Format.</div>
<div class="input-group-append">
<input type="text" class="form-control" id="agt_email" name="agt_email" formControlName="agt_email" />
</div>
</div>

留意上面例子,例子中是以FormGroup.controls['XXX'].invalid这样的语法来获取校验值的,如果该表单元素的内容符合校验,返回true,否则返回false。

5、表单元素取值、设值和控制其是否可编辑的方法:

//取值
this.proposalContract.advertiserId = this.advForm.get("selAdvertiser").value //设值
this.advForm.get("disAdvertiser").setValue(this.advCon.company_name); //设为可编辑/可用
this.advForm.get("selAdvertiser").enable(); //设为不可编辑/可用
this.advForm.get("selAdvertiser").disable();

Angular2+之使用FormGroup、FormBuilder和Validators对象控制表单(取值、赋值、校验和是否可编辑等)的更多相关文章

  1. Django---CBV和FBV的使用,CBV的流程,给视图加装饰器,Request对象方法,属性和Response对象,form表单的上传

    Django---CBV和FBV的使用,CBV的流程,给视图加装饰器,Request请求对象方法,属性和Response响应对象,form表单的上传 一丶CBV和FBV       在Django中存 ...

  2. 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name&value>格式和JSON格式。

    http://zhengxinlong.iteye.com/blog/848712 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name& ...

  3. javascript对象转换,动态属性取值

    $(document).ready(function(){ var exceptionMsg = '${exception.message }'; var exceptionstr = ''; //j ...

  4. jsp学习与提高(二)——JSP 隐式对象、表单处理及过滤器

    1.JSP 隐式对象 JSP隐式对象是JSP容器为每个页面提供的Java对象,开发者可以直接使用它们而不用显式声明.JSP隐式对象也被称为预定义变量. JSP所支持的九大隐式对象: 对象 描述 req ...

  5. TypeScript 中限制对象键名的取值范围

    当我们使用 TypeScript 时,我们想利用它提供的类型系统限制代码的方方面面,对象的键值,也不例外. 譬如我们有个对象存储每个年级的人名,类型大概长这样: type Students = Rec ...

  6. 页面间(窗口间)的取值赋值及获取iframe下的window对象

    ①同一个窗口中,获取某个iframe的信息 <body> <iframe id="PAID" name="PA" src="Item ...

  7. JS中JSON对象的定义和取值

    1.JSON(JavaScript Object Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任 ...

  8. 如果没有<form>标签,也没有enctype="multipart/form-data"属性,怎么使用formData对象提交表单呢?如下方式

    form标签的enctype属性 enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码. 默认地,表单数据会编码为 "application/x-www-form-urlen ...

  9. (文章也有问题,请自行跳过)react中的状态机每次setState都是重新创建新的对象,如需取值,应该在render中处理。

    demo如下 class Demo4StateLearn extends React.Component { constructor(props) { super(props); this.state ...

随机推荐

  1. Codeforces Round #506 (Div. 3) 1029 D. Concatenated Multiples

    题意: 给定n个数字,和一个模数k,从中选出两个数,直接拼接,问拼接成的数字是k的倍数的组合有多少个. 思路: 对于a,b两个数,假定len = length of (b),那么a,b满足条件就是a ...

  2. poj 2117 Electricity(tarjan求割点删掉之后的连通块数)

    题目链接:http://poj.org/problem?id=2117 题意:求删除一个点后,图中最多有多少个连通块. 题解:就是找一下割点,根节点的割点删掉后增加son-1(son为子树个数),非根 ...

  3. redis事务与关系型数据库事务比较

    redis 是一个高性能的key-value 数据库.作为no sql 数据库redis 与传统关系型数据库相比有简单灵活.数据结构丰富.高速读写等优点. 本文主要针对redis 在事物方面的处理与传 ...

  4. CenTOS7使用ACL控制目录权限,只给某个用户访问特定目录

    前言 Linux 基本的权限控制仅可以对所属用户.所属组.其他用户进行的权限控制,而不能精确地控制每个用户的权限.ACL 规则就是用来解决这个问题的. 使用 ACL 规则,我们可以针对单一账户设置文件 ...

  5. 049 模块6-wordcloud库的使用

    目录 一.wordcloud库基本介绍 1.1 wordcloud库概述 1.2 wordcloud库的安装 二.wordcloud库使用说明 2.1 wordcloud库基本使用 2.2 wordc ...

  6. 封装 jsonp请求数据的方法

    什么是jsonp :  Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据. 为什么我们从不 ...

  7. iOS 13 绕过锁屏密码漏洞

    iOS 13 很快就要发布了,在未正式发布之前,西班牙的安全研究员 Jose Rodriguez 公开了一个漏洞,能够查绕过锁屏密码查看通讯录.照片.短信. 在 iOS 设备上,当屏幕锁定时,用户无法 ...

  8. Android studio初次安装启动时弹出unable to access android sdk add-on list提示的解决方法

    一.问题描述 初次安装Android Studio,启动后,报错如下: unable to access android sdk add-on lis 如图: 二.原因分析 AS启动后,会在默认路径下 ...

  9. NTP服务器实现

    时间服务器是一种计算机网络仪器,它从参考时钟获取实际时间,再利用计算机网络把时间信息传递给用户.虽然还有一些比较少用或过时的协议仍然在使用,但现时最重要及广泛使用,作为时间信息发送和同步化的协议是网络 ...

  10. java 手机号码+邮箱的验证

    import java.util.regex.Pattern; //导入的包 1:String REGEX_MOBILE = "^((17[0-9])|(14[0-9])|(13[0-9]) ...