Angular2+之使用FormGroup、FormBuilder和Validators對象控制表單（取值、賦值、校驗和是否可編輯等）
- 2019 年 10 月 9 日
- 筆記
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 Letter</label> </div> </div> ... </div>
可以看到上面的例子，外層的<div>使用了表單formGroup對象advForm，內部的<input>元素使用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();
