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

VirMach 便宜 VPS

QNews

QNews