Question

我正在开发Angular 5，我有一个带有字段用户名的表单。我希望集成自定义验证以获得最小字符长度并避免空格。

<input type="text" class="form-control " id="account-details-username" placeholder="" formControlName="username" >
        <div *ngIf="form.get('accountDetails.username').touched && form.get('accountDetails.username').invalid" class="alert alert-danger">
          <div *ngIf="form.get('accountDetails.username').errors.required">Username is required.</div>
          <div *ngIf="form.get('accountDetails.username').errors.minimumSix">Username must contain at least 6 characters</div>
          <div *ngIf="form.get('accountDetails.username').errors.blankSpace">Username does not contain blank space.</div>
        </div>

我尝试为此创建自定义方法。但只调用第一个条件。

test(control: any) {
console.log(control.value);
let minimumSix = new RegExp("^[a-zA-Z0-9!@#$%^&*]{6,}");

if (!minimumSix.test(control.value)) {
  return { 'minimumSix': true };
}

if(control.value.match("^\\s+$")) {
  console.log("blank");
  return { 'blankSpace': true };
}

return null;
}

不检查空格验证。

Answer 1

当谈到空白时，我建议采用以下解决方案。

const blankSpace = /^\S*$/;

if (!blankSpace.test(control.value)) {
    console.log("blank");
    return { 'blankSpace': true };    
}

所以你的完整方法应该是这样的：

test(control: any) {
    const minimumSix = new RegExp("^[a-zA-Z0-9!@#$%^&*]{6,}");
    const blankSpace = /^\S*$/;

    if (!minimumSix.test(control.value)) {
      return { 'minimumSix': true };
    }

    if (!blankSpace.test(control.value)) {
        console.log("blank");
        return { 'blankSpace': true };    
    }

    return null;
}

Angular 5表单自定义验证无法正常工作

1 个答案: