angular7+ngzorro响应式表单验证

使用响应式表单在开发的过程中,经常会用到。使用响应式表单的不仅能够提高开发效率,并且还能有效减少冗余的代码,在表单校验的时候也更方面,并且结合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">远程解决&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};
    }
}
  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>
  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular中,您可以使用ng-zorro-antd库中的`nz-date-picker`组件来创建一个带有日历和日期范围的日期选择器。以下是一个使用`nz-date-picker`的例子: 1. 首先,您需要在您的应用中安装和导入`ng-zorro-antd`库。 2. 在您的组件的HTML模板中添加一个`nz-date-picker`元素,并使用`nzMode`属性将其定义为日期选择器。 ```html <nz-date-picker nzMode="date"></nz-date-picker> ``` 3. 在您的组件中,您需要定义一个`nz-date-picker`对象,并将其与`nz-date-picker`元素相关联。您还可以使用`nzDisabledDate`属性来定义可选择的日期范围。 ```typescript import { Component } from '@angular/core'; import { NzDatePickerModule } from 'ng-zorro-antd/date-picker'; @Component({ selector: 'app-date-picker', templateUrl: './date-picker.component.html', styleUrls: ['./date-picker.component.css'] }) export class DatePickerComponent { disabledDate = (current: Date): boolean => { const minDate = new Date(2020, 0, 1); const maxDate = new Date(2020, 11, 31); return current < minDate || current > maxDate; } constructor() { } } ``` 在这个例子中,我们定义了一个`disabledDate`函数来禁用不在2020年1月1日和2020年12月31日之间的日期。 4. 最后,您需要在`nz-date-picker`中使用`nzFormat`属性来定义日期的格式。 ```html <nz-date-picker nzMode="date" nzFormat="yyyy-MM-dd" [nzDisabledDate]="disabledDate"></nz-date-picker> ``` 在这个例子中,我们将日期格式定义为`yyyy-MM-dd`。 这就是如何在Angular中使用ng-zorro-antd库中的`nz-date-picker`组件创建一个带有日历和日期范围的日期选择器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值