记录一个实现失败的功能：弹窗设置数字大小限制

再花
141 阅读2分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。
今天收到一个新需求，在退货的弹窗中限制输入的数字无法大于已回货数量。 思路：很简单啊，将一回货数量传到弹窗中，进行判断和限制就可以了。

第一次尝试

构建弹窗需要用的Form表单中新增已回货数量字段

// 构建弹窗所用Form表单
    this.skuData.forEach((value => {
      this.skuForm.push({
        label: value['products_sku'] + ' 入库数量',
        value: value['products_sku'],
        type: 'number',
        maxNumber: value['back_qty'],
        defaults: value['order_qty'] - value['back_qty'],
        required: true
      });
    }));

在弹窗的HTML中增加限制

<input 
    *ngSwitchDefault 
    [type]="form.type ? form.type : ''" 
    [name]="form.value" 
    [formControlName]="form.value" 
    matInput 
    [required]="form.required" 
    [max]="form.maxNumber">

结果只是输入框右边的+1-1按钮做到了限制，手动输入依旧可以随便输入。

第二次尝试

改变思路，需要从手动输入进行限制的话，试一试oninput,在HTML中写死一个oninput试试

<input 
    *ngSwitchDefault 
    [type]="form.type ? form.type : ''" 
    [name]="form.value" 
    [formControlName]="form.value" 
    matInput 
    [required]="form.required" 
    oninput="if(value>100)value=100">

在项目中尝试了一下，生效了，那么直接在form表单中添加需要的语句并设置动态就可以了

// 构建弹窗所用Form表单
    this.skuData.forEach((value => {
      this.skuForm.push({
        label: value['products_sku'] + ' 入库数量',
        value: value['products_sku'],
        type: 'number',
        oninput: `if(value>${value['back_qty']})value=${value['back_qty']}`,
        defaults: value['order_qty'] - value['back_qty'],
        required: true
      });
    }));

结果我发现了一个非常严重的问题，就和之前动态设置css一样，oninput和style都无法使用双向数据绑定！ 无论下方哪种写法都是会报错的：

oninput="form.oninput"

oninput="{{form.oninput}}"

[oninput]="form.oninput"

那只能重新找方法咯，所以我开始在搜索引擎中寻找。

第三次尝试

那需要找一个可以使用双向数据绑定的方法，限制必定是一个input框对应一条限制的，必须读取form表单里的字段。 通过查找资料打算尝试一下(change)，原理与oninput相同但可以绑定函数，且支持双向数据绑定。

<input 
    *ngSwitchDefault 
    [type]="form.type ? form.type : ''" 
    [name]="form.value" 
    [formControlName]="form.value" 
    matInput 
    [required]="form.required" 
    (change)="form.value>form.maxNumber ? form.value=form.maxNumber :form.maxNumber">

运行项目后发现并没有生效，于是将form.value打印出来看了一下，undefined???怎么可能???

最终结论

后来我仔细回顾了一下代码，恍然大悟。 首先form.value并不是input框的值，而是用来声明formControl名字的，有几个value值则会声明几个对应名字的formControl
其次有没有其他办法可以获取input框值呢，我想到可以使用函数获取值后在函数中进行判断和设置，后来我发现并没有办法（至少目前认为），因为input框的值在formControl中，而formControl只有在弹窗确认关闭后才会生成一个FormGroup，也就是在弹窗结束前是无法获取到input框的值的！
于是我放弃了这个功能的实现。

最后依旧还是解决了，交给后端处理了

avatar
文章
阅读
粉丝