angular7+ngzorro响应式表单验证

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

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

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

在组件中使用

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

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

2. 定义响应式表单

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

}

3. 使用

<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">远程解决&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自定义表单验证

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

2. 定义

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

3. 使用

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