Angular2+之使用FormGroup、FormBuilder和Validators对象控制表单（取值、赋值、校验和是否可编辑等）

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

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

 

2、然后定义一个FormGroup对象，并且对它进行初始化（.ts文件）：

1 public advForm: FormGroup;

 

 1 this.advForm = this.formBuilder.group({
 2       selAdvertiser:[''],
 3       disAdvertiser:[''],
 4       adv_cont_title:[''],
 5       adv_cont_name:[''],
 6       adv_email: ['', Validators.pattern("^([A-Za-z0-9!#\$%&'\*\+=\?\^_`\{\|\}~-]+[\.]?)+@([A-Za-z0-9]+[\.])+[A-Za-z]{2,4}$")],
 7       adv_tel: ['', Validators.pattern('[^A-Za-z]+$')],
 8       adv_fax: ['', Validators.pattern('[^A-Za-z]+$')],//使用正则表达式进行校验
 9       proposal_num:[''],
10       contract_num:[''],
11       proposal_ver:[''],
12       contract_ver:[''],
13       package_name:[''],
14       description:[''],
15       deadline:[''],
16       period:[''],
17       agt_letter:[''],
18       credit_ass:['']
19     });

 

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 Letterlabel>
          div>
        div>
        ...
    div>

可以看到上面的例子，外层的

使用了表单formGroup对象advForm，内部的元素使用formControlName="agt_letter"来表明这个表单元素是对象FormGroup对象中的advForm（advForm实际上是FormController对象，只是上面使用了FormBuilder自动生成了）。

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

1 <div class="">
2           <div class="error-message" *ngIf="agtForm.controls['agt_email'].invalid">must be Email Format.div>
3           <div class="input-group-append">
4             <input type="text" class="form-control" id="agt_email" name="agt_email" formControlName="agt_email" />
5           div>
6         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();