Christian-Yang / Translate-and-save

Translate and save for my self
1 stars 0 forks source link

解决自己封装的input框,max最大值校验时候,max值实际为0的问题! #1

Open Christian-Yang opened 7 years ago

Christian-Yang commented 7 years ago

项目自己封装的input输入框,并且还有以前写的max最大校验,但是发现如果,max="100"这样静态的赋值时候,是可以进行正常的校验,不会出现问题,但是如果max="{{object.value}}"这种方式动态的设置校验值的时候,是不能进行校验的。虽然查看标签上面的内容可以看到这个max="100"已经被添加到标签上了。但是实际上当进入校验器中设置断点的时候发现这个值实际上是没有获取到的被设置成为了0。于是就出现了无法校验的情况,原始的这个maxValue=100值是在max这个属性指令构建的时候通过构造函数传递进来的。但是如果动态设置值,那么当这个自己封装的input框被创建初始化的时候,{{object.value}}这个值还没有传递进来所以这个值最终是0。

解决的办法是:
首先在构造函数中构建一个ElementRef类,然后在ngAfterViewInit中获取封装的input框内的子input框的max属性,这个max属性值肯定是正确的,因为html标签上是能读到这个属性的。然后使用这个属性的值作为最大值进行校验。

 ngAfterViewInit() {
      this.localMaxValue = this.localElementRef.nativeElement.querySelector('input').getAttribute('max');
      this._validator = max(NumberWrapperParseInt(this.localMaxValue, 10));
    }

参考资料: ElementRef.nativeElement.querySelector('')的使用: https://segmentfault.com/a/1190000008653690
angular 校验指令的编写:https://dreambo8563.github.io/2016/01/19/Angular2-Directive-validators/

Christian-Yang commented 7 years ago

这段代码可能会出现问题,问题的原因是,当我们自己实现了这个验证器的时候,我们只是想给我们自己封装的input框来用,但是结果发现原来的html中的input框,也使用了这个验证器,这样就会导致问题,因为原装的input下面没有input。所以就会导致 this.localElementRef.nativeElement.querySelector('input') ===null的出现,所以出现了问题,所以这里需要添加一个判断。如果为null那么就return。