注:下面我说的Form表单的用法是在一个完整的项目中的用法
1、引入组件
在 app.module.ts 文件中引入组件,代码如下所示:
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
imports: [
FormsModule,
ReactiveFormsModule
],
在当前页面引入(你需要使用该组件的页面),代码如下所示:
import {FormBuilder, FormGroup, Validators, FormControl} from '@angular/forms';
2、使用
在你的当前组件的html 文件中,新建form标签。代码如下所示:
<form [formGroup]="newLocationForm" autocomplete="off">
<p-accordion [multiple]="true">
<p-accordionTab header="基本信息" [selected]="true">
<div class="ui-g">
<div class="ui-g-6 fydd-new-location-input-container">
<span class="ui-float-label">
<input class="fydd-new-location-input" type="text" size="30" pInputText formControlName="locationId">
<label><span class="is-must">*</span>账号</label>
</span>
</div>
<div class="ui-g-6 fydd-new-location-input-container">
<span class="ui-float-label">
<input class="fydd-new-location-input" type="text" size="30" pInputText formControlName="locationName">
<label><span class="is-must">*</span>用户名称</label>
</span>
</div>
<div class="ui-g-6 fydd-new-location-input-container">
<span class="ui-float-label">
<input class="fydd-new-location-input" type="text" size="30" pInputText formControlName="locationName">
<label><span class="is-must">*</span>客户姓名</label>
</span>
</div>
<div class="ui-g-6 fydd-new-location-input-container">
<span class="ui-float-label">
<input class="fydd-new-location-input" type="text" size="30" pInputText formControlName="address">
<label><span class="is-must">*</span>用户地址</label>
</span>
</div>
<div class="ui-g-6 fydd-new-location-input-container">
<span class="ui-float-label">
<input class="fydd-new-location-input" type="text" size="30" pInputText formControlName="locationCross">
<label><span class="is-must">*</span>详细交叉路</label>
</span>
</div>
</div>
</p-accordionTab>
</p-accordion>
</form>
注:
(1)在form表单中,ngModule是无效的,你需要使用formControlName来绑定对应的关键字。
(2)[formGroup]="newLocationForm",这个是用来初始化你的form表单。其中 newLocationForm 我们需要在对应的ts文件中定义并赋值。详细操作见下面代码:
import {FormBuilder, FormGroup, Validators, FormControl} from '@angular/forms';
export class CreateLocationWindowComponent implements OnInit {
newLocationForm: FormGroup;
constructor( private fb: FormBuilder) {}
ngOnInit() {
this.initNewLocationForm();
}
initNewLocationForm() {
this.newLocationForm = this.fb.group({
locationId: ['', Validators.required],
locationName: ['', Validators.required],
address: ['', Validators.required],
locationCross: ['']
});
}
注:
(1)CreateLocationWindowComponent 是我的当前组件(页面)的名称,这个会在你创建当前组件的时候自动生成。
(2)this.initNewLocationForm(); 是我自定义的函数,用来为你的newLocationForm 赋值,也就是初始化form的数据的函数。
(3)HTML中的formControlName必须与newLocationForm 定义的关键字相对应。比如说: formControlName="locationName",那么在初始化newLocationForm 中的值的时候,locationName必须存在。同时,你也可以给它附一个初始值,代码:locationName: ['张三', Validators.required]。
(4)Validators.required。这个意思是必填项。
到此为止,你可以顺利的使用form表单了。
3、番外
(1)为newLocationForm 赋值;setValue()
const toSet: any = {
locationId: '00000001',
locationName: '张三',
address: '巴拉巴拉',
locationCross: '网max'
}
this.newLocationForm.setValue(toSet);
注:在你setValue的时候,不是必须把所有的都得设置一遍,你需要为哪个值赋值就为哪个值赋值。
(2) 动态添加控制键(关键字)。addControl()
for (let i = 1; i <= this.newLocation['物业电话'].length - 1; i++) {
const zoneId = this.propertyTelList.length + 1;
const property = {propertyNum: zoneId};
this.newLocationForm.addControl('propertyTel' + zoneId, new FormControl(this.newLocation['物业电话'][i], Validators.required));
this.propertyTelList.push(property);
}
注:
1)'propertyTel' + zoneId 是新建的控制键的名称。zoneId 是序号(编号),因为控制键的名字不能重复。
2)在这里我用到了了for循环是因为我需要添加多个不定量的控制键,如果你需要,则不需要使用for循环。
(3)动态移除控制键。 removeControl()
this.newLocationForm.removeControl('contactName' + zoneId);
(4) 清空newLocationForm的值。reset()
this.newLocationForm.reset();
注:当你使用该函数的时候,只是会将你赋给控制键的值清空,不能使你动态添加或删除的的控制键恢复 。
(5)获取newLocationForm中的某个值。
const phoneNumber = this.newLocationForm.value['contactTel'];
注:contactTel 是你在newLocationForm中定义的控制键,必须存在。