前言

相信大家有很多需要在表单里面进行日期input框的两个之间的比较。作者这里项目有一个“开学时间”和“毕业时间”的比较，前者不能大于后者。否则给用户一个提示，并把input输入框填写的日期清空。

一、直接遇到的问题

详情观看以下gif图，并附源码

这是清空的效果，可以发现如果毕业时间先清空，选择一个合理的时间后，再触发清空事件，日期组件是卡死的，报错见控制台

很奇怪，getYear of null!
这里可能有人说加一个不为空的判断就好了，试过了，不行。
不然我也不会在这里记录这个问题了。

二、源码参考

代码如下（html端）：

 <div nz-col nzSpan="4" class="education-column-item"><nz-form-control  ><nz-month-pickerid="datestart"[formControlName]="education.admissionTime"nzPlaceHolder="入学时间"></nz-month-picker></nz-form-control></div><div nz-col nzSpan="4" class="education-column-item"><nz-form-control  ><nz-month-picker [formControlName]="education.graduationTime"nzPlaceHolder="毕业时间"id="dateend"(ngModelChange)="checkEndDayForEducation($event,listOfEducation.length-1)"></nz-month-picker></nz-form-control></div>

（ts端）：

checkEndDayForEducation(value:Date,index){console.log(index);let startDate:Date = this.validateForm.get("admissionTime"+`${index}`).value;let endDate:Date = this.validateForm.get("graduationTime"+`${index}`).value;// console.log(startDate,endDate);if( startDate!==null){let endD =  endDate.getTime();let startD =  startDate.getTime();console.log(startD);// console.log(endD);if(startD>endD){this.message.info("毕业时间不可小于开学时间！");this.validateForm.get("graduationTime"+`${index}`).setValue("");}}};

1.解决方法

在清空input框的代码地方加入一个定时器，时间200没啥效果，300是最短的可行时间，在效果上也不会显得太有时差感

          setTimeout(() => {this.validateForm.get("graduationTime"+`${index}`).setValue("");}, 300);

修改后的效果如下：

此时效果达到了选择非法日期马上就能清空的效果（虽然设置了定时器为300）

原因分析

初始逻辑在选择日期的时候就顺便要把它清空，所以组件getYear of null,这里判空，感觉就是执行函数的需要同时执行，但是又要达到两者的效果，所以不能兼顾。给一个时间差，起码选到了时间，函数里的参数就不为空了（个人理解，没啥专业术语！）

总结

angular虽然现存的已经封装好的功能或者组件都很多，想直接拿来用未免或出一些不知名的错误，有些问题在github论坛或者官网也没有，如果自己钻研可能会花掉很多时间。可能我这个日期功能是很多表单用的到的功能，如果哪天有人用angular写项目时候，遇到同样的问题，我这里仅供参考。自己零基础学了框架与前端，不能与各位大神相比，文章截图都是来自我的手头上的真实项目，如果哪里有写的不好的地方，还请见谅！（gif软件screentoGif:(https://www.screentogif.com/))。

Angular8.+ 项目引入ngzorro组件nz-month-picker的清空问题相关推荐

vue项目引入vux组件
搭建好vue项目后,这边主要做的手机端,综合比较后决定引入vux组件 1.安装vux npm install vux --save 或者使用 yarn yarn add vux // 安装 yarn ...
Angular前端项目(使用ng-zorro组件库)
分享一个最近在做的一个前端项目,前端选型Angular,组件库选择的是ng-zorro(官网:http://ng.ant.design/docs/introduce/zh).项目结构以及项目里面用到的 ...
在Angular项目中引入NG-ZORRO
在Angular项目中引入NG-ZORRO 1.前置 2.安装NG-ZORRO并进行初始化配置 3.引入样式 4.引入组件 1.前置首先创建一个angular项目:angular创建一个新项目的步骤 ...
vue-cli项目中单文件组件引入bootstrap.js异常的解决方案
vue-cli项目中单文件组件引入bootstrap.js异常的解决方案参考文章: (1)vue-cli项目中单文件组件引入bootstrap.js异常的解决方案 (2)https://www.cn ...
Vue 引入 mui 组件
由于我们发的项目主要是在移动设备上跑的,为了达到更好的体验我们将使用 mui 来实现更接近原生的体验我在集成的时候遇到的坑在这里和大家一起分享下首先我创建了一个static 文件夹.这 ...
element引入的组件大小高度不对_试水 elementplus ui 组件库
上次逛知乎发现 element 之前的团队,已经将 element-plus 开发出来了,看来我们可以在 Vue3 接着使用 element 了,在我的心目中 element 这个框架真的好,设计样 ...
springboot继承组件_SpringBoot如何扩展引入的组件，以及如何自动配置组件原理
大家都知道,当我们创建SpringBoot项目之后,我们可以在pom文件下,引入我们想要启动的组件,当我们引入之后,SpringBoot会自动帮我们配置属性! 下面我们以SpringBoot引入Spr ...
vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
通过cmd和npm指令，快速引入element-ui组件
如何通过 cmd和 npm指令,在新建 vue.js项目中,快速引入 Element-ui组件 ? 范例 - 项目路径截图参考: 流程说明: 新建项目文件夹,命名如: m2-vue-element 启 ...

Angular8.+ 项目引入ngzorro组件nz-month-picker的清空问题

文章目录

前言

一、直接遇到的问题

二、源码参考

1.解决方法

原因分析

总结

Angular8.+ 项目引入ngzorro组件nz-month-picker的清空问题相关推荐

最新文章

热门文章