angular7+ngzorro响应式表单验证

小咪咪 2022-01-10 06:17 456阅读 0赞

使用响应式表单在开发的过程中，经常会用到。使用响应式表单的不仅能够提高开发效率，并且还能有效减少冗余的代码，在表单校验的时候也更方面，并且结合ngzorro进行表单校验效果更完美。

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

import { ReactiveFormsModule } from '@angular/forms';

#### 在组件中使用 ####

1.  引入响应式表单需要的工具

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

1.  定义响应式表单

// 表单校验
    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;
                }
            });
        }
    
    }

1.  使用

<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自定义表单验证 ####

1.  将自定义的表单校验器放到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};
        }
    }

1.  定义

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]],  // 总计报价
    });

1.  使用

<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>