使用响应式表单在开发的过程中,经常会用到。使用响应式表单的不仅能够提高开发效率,并且还能有效减少冗余的代码,在表单校验的时候也更方面,并且结合ngzorro进行表单校验效果更完美。
首先引入在对应的模块中或者共享模块中引入ReactiveFormsModule
import { ReactiveFormsModule } from '@angular/forms';
在组件中使用
- 引入响应式表单需要的工具
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
- 定义响应式表单
// 表单校验
validateForm: FormGroup;
constructor(
public tools: ToolsService,
public api: ApiService,
public http: HttpService,
public nzModalService: NzModalService,
public nzMessageService: NzMessageService,
private fb: FormBuilder
) {
// 表单校验
this.validateForm = this.fb.group({
ferSiteID: [24, [Validators.required]], // 配肥站编号
equiCode: [''], // 设备编号
equiBucketMode: [''], // 设备类型
faultType: ['', [Validators.required]], // 故障类型
handleUser: [''], // 远程处理人
equipFaultLevelValue: [0, [Validators.required]], // 故障级别
solution: ['', [Validators.required]], // 远程解决方案
solutionDesc: ['', [Validators.required]], // 远程解决方案描述
troubleDesc: ['', [Validators.required]], // 远程处理情况
isSolve: [0, [Validators.required]], // 是否解决故障
fileUploadImg: ['', [Validators.required]]
});
}
// 确定模态框
handleOk() {
for (const i in this.validateForm.controls) {
if (true) {
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
}
if (this.validateForm.valid) {
const fileListString = JSON.stringify(this.formData.fileList);
// 传递的参数
const params = `EquipmentGUID=${this.formData.equipmentGUID}&HandleResult=${this.validateForm.value.isSolve}&FaultTypeGUID=${this.validateForm.value.faultType}&HandleUserGUID=${this.validateForm.value.handleUser}&IsEmergent=${this.validateForm.value.equipFaultLevelValue}&Solution=${this.validateForm.value.solution}&SolutionDesc=${this.validateForm.value.solutionDesc}&TroubleDesc=${this.validateForm.value.troubleDesc}&UserGUID=${this.formData.userGUID}&File=${fileListString}`;
this.http.doPost(this.api.addEquTrouble, params).subscribe((data: any) => {
if (data.IsSucceed) {
this.isVisible = false;
this.nzMessageService.success('添加成功');
this.outer.emit('添加成功了');
} else {
this.nzMessageService.error('添加失败');
this.isVisible = false;
}
});
}
}
- 使用
<form nz-form [formGroup]="validateForm">
<div nz-row>
<div nz-col nzSpan="12">
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired>配肥站编号</nz-form-label>
<nz-form-control [nzSpan]="17">
<nz-select
nzPlaceHolder="请选择配肥站"
formControlName="ferSiteID"
[nzShowSearch]="true"
(ngModelChange)="getFerSiteID($event)"
>
<nz-option [nzValue]="item.ID" [nzLabel]="item.FertilizerSiteNameID" *ngFor="let item of ferSiteList"></nz-option>
</nz-select>
<nz-form-explain *ngIf="(validateForm.get('ferSiteID')?.dirty && validateForm.get('ferSiteID')?.errors)">
<ng-container *ngIf="validateForm.get('ferSiteID')?.hasError('required')">
配肥站不能为空!
</ng-container>
</nz-form-explain>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col nzSpan="12">
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired>设备编号</nz-form-label>
<nz-form-control [nzSpan]="17">
<input class="nz_input" readonly nz-input formControlName="equiCode" />
</nz-form-control>
</nz-form-item>
</div>
</div>
<div nz-row>
<div nz-col nzSpan="12">
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired>设备类型</nz-form-label>
<nz-form-control [nzSpan]="17">
<input class="nz_input" readonly nz-input formControlName="equiBucketMode" />
</nz-form-control>
</nz-form-item>
</div>
<div nz-col nzSpan="12">
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired>故障类型</nz-form-label>
<nz-form-control [nzSpan]="17">
<nz-tree-select
nzPlaceHolder="请选择故障类型"
[nzMaxTagCount]="5"
[nzMultiple]="true"
[nzNodes]="faultTypeList"
formControlName="faultType"
[nzNotFoundContent]="'暂无数据'"
nzShowSearch
>
</nz-tree-select>
<nz-form-explain *ngIf="(validateForm.get('faultType')?.dirty && validateForm.get('faultType')?.errors)">
<ng-container *ngIf="validateForm.get('faultType')?.hasError('required')">
故障类型不能为空!
</ng-container>
</nz-form-explain>
</nz-form-control>
</nz-form-item>
</div>
</div>
<div nz-row>
<div nz-col nzSpan="12">
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired>远程处理人</nz-form-label>
<nz-form-control [nzSpan]="17">
<nz-select
nzPlaceHolder="请选择远程处理人"
formControlName="handleUser"
>
<nz-option [nzValue]="item.RelationGUID" [nzLabel]="item.Name" *ngFor="let item of handleUserList"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col nzSpan="12">
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired>故障级别</nz-form-label>
<nz-form-control [nzSpan]="17">
<nz-radio-group formControlName="equipFaultLevelValue">
<label nz-radio [nzValue]="item.key" *ngFor="let item of equipFaultLevelList">{{item.value}}</label>
</nz-radio-group>
</nz-form-control>
</nz-form-item>
</div>
</div>
<div nz-row>
<div nz-col nzSpan="12">
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired>远程解决方案</nz-form-label>
<nz-form-control [nzSpan]="17">
<textarea rows="4" nz-input [nzAutosize]="{ minRows: 4, maxRows: 6 }" formControlName="solution"></textarea>
<nz-form-explain *ngIf="(validateForm.get('solution')?.dirty && validateForm.get('solution')?.errors)">
<ng-container *ngIf="validateForm.get('solution')?.hasError('required')">
远程解决方案不能为空!
</ng-container>
</nz-form-explain>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col nzSpan="12">
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired class="my_label">远程解决 <br>方案描述</nz-form-label>
<nz-form-control [nzSpan]="17">
<textarea rows="4" nz-input [nzAutosize]="{ minRows: 4, maxRows: 6 }" formControlName="solutionDesc"></textarea>
<nz-form-explain *ngIf="(validateForm.get('solutionDesc')?.dirty && validateForm.get('solutionDesc')?.errors)">
<ng-container *ngIf="validateForm.get('solutionDesc')?.hasError('required')">
远程解决方案描述不能为空!
</ng-container>
</nz-form-explain>
</nz-form-control>
</nz-form-item>
</div>
</div>
<div nz-row>
<div nz-col nzSpan="12">
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired class="my_label">远程处理情况</nz-form-label>
<nz-form-control [nzSpan]="17">
<textarea rows="4" nz-input [nzAutosize]="{ minRows: 4, maxRows: 6 }" formControlName="troubleDesc"></textarea>
<nz-form-explain *ngIf="(validateForm.get('troubleDesc')?.dirty && validateForm.get('troubleDesc')?.errors)">
<ng-container *ngIf="validateForm.get('troubleDesc')?.hasError('required')">
远程处理情况不能为空!
</ng-container>
</nz-form-explain>
</nz-form-control>
</nz-form-item>
</div>
<div nz-col nzSpan="12">
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired class="my_label">是否解决</nz-form-label>
<nz-form-control [nzSpan]="17">
<nz-radio-group formControlName="isSolve">
<label nz-radio [nzValue]="item.key" *ngFor="let item of isSolveValueList">{{item.value}}</label>
</nz-radio-group>
</nz-form-control>
</nz-form-item>
</div>
</div>
<div nz-row style="padding-left: 16px;">
<nz-form-item>
<nz-form-label [nzSpan]="3" nzRequired>故障图片</nz-form-label>
<nz-form-control [nzSpan]="21">
<div class="avatorImg">
<ng-container>
<div class="ant-upload" tabindex="0" role="button" (click)="handleFileUpload()">
<i class="anticon upload-icon anticon-plus ng-star-inserted">
<svg viewBox="64 64 896 896" fill="currentColor" width="1em" height="1em" data-icon="plus" aria-hidden="true"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg>
</i>
<div class="ant-upload-text ng-star-inserted">上传图片</div>
</div>
</ng-container>
<input style="display: none;" type="file" #fileUploadImg formControlName="fileUploadImg">
</div>
<ng-container *ngIf="formData.fileList.length > 0">
<div class="avatorImg" *ngFor="let item of formData.fileList">
![在这里插入图片描述]()
</div>
</ng-container>
<nz-form-explain *ngIf="(validateForm.get('fileUploadImg')?.dirty && validateForm.get('fileUploadImg')?.errors)">
<ng-container *ngIf="validateForm.get('fileUploadImg')?.hasError('required')">
故障图片不能为空!
</ng-container>
</nz-form-explain>
</nz-form-control>
</nz-form-item>
</div>
</form>
angular+ngzorro自定义表单验证
- 将自定义的表单校验器放到validator.ts单独的文件中,手动创建即可
import { FormControl, FormGroup } from '@angular/forms';
// 验证时间小时——正整数——单一字段
export function numberTimeValidator(control: FormControl): any {
if (!control.value) {
return { required: true };
} else {
const regs = /^[1-9]\d*$/;
const valid = regs.test(control.value);
return valid ? null : {numberTime: true};
}
}
// 验证金额数字
export function amountValidator(control: FormControl): any {
if (!control.value) {
return { required: true };
} else {
const regs = /^([1-9][\d]{0,7}|0)(\.[\d]{1,2})?$/;
const valid = regs.test(control.value);
return valid ? null : {amount: true};
}
}
- 定义
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { numberTimeValidator, amountValidator } from 'src/app/form-validator/validator';
this.validateForm = this.fb.group({
isGuarantee: ['0', [Validators.required]], // 是否过保
isPay: ['0', [Validators.required]], // 是否支付
sparePartsDescript: ['', [Validators.required]], // 计划备品备件概况
solutionDescript: ['', [Validators.required]], // 预估解决方案
solutionTime: ['', [Validators.required, numberTimeValidator]], // 预估解决用时
sparePartsPrice: [0, [Validators.required, amountValidator]], // 备品备件总价
travelPrice: [0, [Validators.required, amountValidator]], // 人工差旅报价
totalPrice: [0, [Validators.required]], // 总计报价
});
- 使用
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired>预估解决用时</nz-form-label>
<nz-form-control [nzSpan]="12">
<input type="number" nz-input formControlName="solutionTime" />
<nz-form-explain
*ngIf="(validateForm.get('solutionTime')?.dirty && validateForm.get('solutionTime')?.errors)">
<ng-container *ngIf="validateForm.get('solutionTime')?.hasError('required')">
预估解决用时不能为空
</ng-container>
<ng-container *ngIf="validateForm.get('solutionTime')?.hasError('numberTime')">
时间只能输入正整数,例如(4)小时
</ng-container>
</nz-form-explain>
</nz-form-control>
</nz-form-item>