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]+$')],//使用正則表達式進行校驗  9       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();