angular7+ngzorro响应式表单验证

使用响应式表单在开发的过程中，经常会用到。使用响应式表单的不仅能够提高开发效率，并且还能有效减少冗余的代码，在表单校验的时候也更方面，并且结合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-selectnzPlaceHolder="请选择配肥站"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-selectnzPlaceHolder="请选择故障类型"[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-selectnzPlaceHolder="请选择远程处理人"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">远程解决&nbsp;&nbsp;<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>

angular7+ngzorro响应式表单验证相关推荐

Angular响应式表单及表单验证
1. 什么是响应式表单? 响应式表单提供了一种模型驱动的方式来处理表单输入,其中的值会随时间而变化. 响应式表单使用显示的,不可变的方式,管理表单在特定时间点上的状态.对表单状态的每一次变更都会返回一 ...
Angular2响应式表单
本文将半翻译半总结的讲讲ng2官网的另一个未翻译高级教程页面. 原文地址. 文章目的是使用ng2提供的响应式表单技术快速搭出功能完善丰富的界面表单组件. 响应式表单是一项响应式风格的ng2技术,本文将 ...
angular6的响应式表单
1:在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单,就要从@angular/forms包中导入ReactiveFormsModule,并把它添加到你的NgM ...
Angular Reactive Forms -- Model-Driven Forms响应式表单
Angular 4.x 中有两种表单: Template-Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 ) 官方文档:https://v2.angul ...
Angular 响应式表单 patchValue和setValue
在 Angular 4 中有多种方式可以更新表单的值,对于使用响应式表单的场景,我们可以通过框架内部提供的 API ,(如 patchValue 和 setValue )方便地更新表单的值.这篇文章我 ...
Angular 响应式表单基础例子
1.案例需求表单提交,表单全部校验成功才能提交,当表单校验错误,表单边框变红,同时有错误提示信息,有重置功能 2.代码分析在线预览 git仓库本案例中使用了响应式表单,响应式表单在表单的校验方面 ...
灵雀云前端： Angular 响应式表单
Kubernetes 对象实战简介 Kubernetes 集群的使用者日常工作中经常需要与 Deployment 等 Kubernetes 对象接触.熟悉 Kubernetes 的朋友都会知道,Ku ...
html表单模板属性,HTML5超酷响应式表单美化模板插件
这是一款非常效果非常酷的HTML5超酷响应式表单美化效果插件.表单的整体效果使用扁平化风格,使用media queries来为各种屏幕创建响应式效果.在大屏幕上,整个表单分三列显示,当屏幕小到一定程度 ...
Angular 响应式表单
Kubernetes 对象实战简介 Kubernetes 集群的使用者日常工作中经常需要与 Deployment 等 Kubernetes 对象接触.熟悉 Kubernetes 的朋友都会知道,Ku ...

angular7+ngzorro响应式表单验证

首先引入在对应的模块中或者共享模块中引入`ReactiveFormsModule`

在组件中使用

angular+ngzorro自定义表单验证

angular7+ngzorro响应式表单验证相关推荐

最新文章

热门文章

angular7+ngzorro响应式表单验证

首先引入在对应的模块中或者共享模块中引入ReactiveFormsModule

在组件中使用

angular+ngzorro自定义表单验证

angular7+ngzorro响应式表单验证相关推荐

最新文章

热门文章

首先引入在对应的模块中或者共享模块中引入`ReactiveFormsModule`