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

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();

秒客网