Пользовательская проверка формы Angular 5 не работает должным образом

Question

Я работаю над Angular 5, и у меня есть форма с полем username.Я хочу интегрировать пользовательскую проверку для минимальной длины символа и избежать пробела.

<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;
}