字母数字范围验证答案

【问题标题】：Alphanumeric range validation字母数字范围验证
【发布时间】：2020-12-04 07:07:43
【问题描述】：

有没有一种方法可以在给定的两个字母数字字符串中找到一个范围并对输入字段应用验证？范围可以出现在字母数字值内的任何位置。试图在角度打字稿文件中实现这一点。

示例：对于 123-01N3W 到 123-01N97W 的范围，123-01N45W 在范围内。 12301N45W 不在范围内。（缺少连字符元素） 123-01N2W 不在范围内。 (2 97)

【问题讨论】：

标签： angular typescript validation range alphanumeric

【解决方案1】：

创建自定义验证

validationRange(min:string,max:string){
    return (control:AbstractControl)=>{
       if (control.value)
       {
          const minInt=+(min.replace(/\D/gi,""))
          const maxInt=+(max.replace(/\D/gi,""))

          const valueInt=+(control.value.replace(/\D/gi,""))
          return valueInt>=minInt && valueInt<=maxInt?null:{range:"not in range"}
       }
    }
}

//you use

control=new FormControl(null,this.validationRange("123-01N3W","123-01N97W")

如果您希望最小值和最大值不固定 (*)，例如是来自同一个formGroup中的其他formControls你可以

//your form is like
form=new FormGroup({
   min:new FormControl(null),
   max:new FormControl(null),
   value:new FormControl(null,this.validationRange())
})

validationRange(){
    return (control:AbstractControl)=>{
       const form=(control.parent as FormGroup)
       if (form && control.value){
          const ctrlMax=form.get('max');
          const ctrlMin=form.get('min');
          if (ctrlMax && ctrlMin && ctrMax.value && ctrMin.value)
          {
               const ctrMin.value=+(min.replace(/\D/gi,""))
               const ctrMax.value=+(max.replace(/\D/gi,""))

               const valueInt=+(control.value.replace(/\D/gi,""))
               return valueInt>=minInt && valueInt<=maxInt?null:{range:"not in range"}
          }
      }
    }
}

但请记住，当更改“min”和“max”时会产生一个

  this.form.get('value').updateValueAndValidity()

例如在（模糊）事件中

      <form formGroup]="form">
       <input formControlName="min" (blur)="form.get('value').updateValueAndValidity()">
       <input formControlName="min" (blur)="form.get('value').updateValueAndValidity()">
       <input formControlName="value" >
      </form>

(*) 当我们创建一个依赖于变量的自定义表单验证时，我们需要考虑到得到的值是变量的“实际”值。因此，如果这个变量来自对 API 的调用，我们需要在获取值后进行 setValidation

【讨论】：