如何将maxlength属性设置为在一个输入字段中输入带有逗号的每个字符串

Question

我有一个输入文本框字段，用户可以输入逗号分隔的值，如.

value 1,value 2,value 3,value 4

我需要将该字段中输入的每个值的最大长度设置为128个字符。我知道我们有一个maxlength属性，它将设置在整个字段级别上。但是有什么方法可以限制在字段中输入的每个值的长度吗？

<input type="text" class="form-control" formControlName="licenseOwnerName" maxlength="128">

上面的HTML将为字段中的总值设置，但如何设置每个由逗号分隔的值。

我有一个验证器，它检查用户是否输入了至少2个值。

    import { AbstractControl } from "@angular/forms";

    export function InputValuesValidator(control: AbstractControl): { [key: string]: boolean } | null {
        if (control.value) {
            let splitString = (control.value).split(',');
            if(splitString.length == 1 || splitString[1] == "") {
                return { 'valuelisterror': true };
            }
        }
        return null;
    }

我可以修改这个验证器来检查长度吗？请建议一下。谢谢。

Answer 1

让你的文本验证功能像这样，

textInputValidation(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const valuesLength = control.value.split(',').length - 1;
    if (control.value.split(',')[valuesLength].length>128) {
      return {
        textLengthError: 'You have entered more than 128 chars '
      };
    } else {
      return null;
    }
  };
}

您还必须从HTML中删除maxlength属性，我的建议是使用不同的函数进行验证，将所有的验证逻辑都放在一起并不是一个好的实践。

Answer 2

当您尝试制作一些组件时，首先尝试创建一个简单的组件模型是很重要的，因为如果您尝试这样做的话，您想要的就会更好：

event.keyCode === 188的意思是逗号，您也可以添加Enter或任何您想要的；输入总是有一个最大长度，用户不能输入更多

​

​

Html：

<label for="tag" class="a">
<ul>
<li *ngFor="let tag of tags">{{tag}}</li>
<li>
  <input id="tag" type="text" maxlength="125" [(ngModel)]="tag" (keyup)="callMe($event)">
</li>
</ul>
</label>

ts：

tags = [];
tag = null;

callMe(event) {
  if (this.tag.length <= 128) {
    if (event.keyCode === 188) {
      this.tags.push(this.tag);
      this.tag = null;
    }
  }
}

Css：

.a {
 border: dashed 1px #ccc;
 display: block;
}

.a ul li {
 display: inline-block;
 margin: 0 5px;
 list-style: none;
}

input {
 border: none;
 outline: none;
}

Answer 3

这将创建一个由逗号分隔的单词数组，并检查它们的长度(此处为4)。只是一个粗略的想法，定制它适合你的需要。

<input id="license" type="text" class="form-control" formControlName="licenseOwnerName" maxlength="128">

let lic = document.getElementById("license");
lic.addEventListener("input", function(e) {
  lic_arr = lic.value.split(",");
    for(let word in lic_arr) {
    if(lic_arr[word].length > 4) {
      alert("too long");
    }
  }
})