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

---

前言

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

---

一、直接遇到的问题

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

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

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

二、源码参考

代码如下（html端）：

 <div nz-col nzSpan="4" class="education-column-item">
                      <nz-form-control  >
                        <nz-month-picker
                          id="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/))。