时间戳

首页 > 解决方案 > Angular Whitespace Validator 工作错误

angular - Angular Whitespace Validator 工作错误

问题描述

我不知道我做错了什么。我的空格验证器工作错误。

TS：

this.personalForm = this.form.group({
      firstname: ['', [Validators.required, Validators.minLength(4), CustomValidators.validateCharacters]],
      lastname: ['', [Validators.required, NoWhitespaceValidator()]], //CustomValidators.validateCharacters,
      country: ['', [Validators.required]],
      dateOfBirth: ['', [Validators.required]],
      gender: ['', [Validators.required]],
})

HTML：

<mat-form-field class="field-sizing">
              <input matInput required placeholder="{{ 'REGISTRATION.LASTNAME' | translate }}" name="lastname"
                formControlName="lastname" type="name"
                [ngClass]="{ 'is-invalid': g.lastname.touched && g.lastname.errors }" />
                <mat-error class="invalid-feedback"
                *ngIf="g.lastname.touched && g.lastname.errors && g.lastname.errors.whitespace">
                {{ 'REGISTRATION.LASTNAME' | translate }} 
              </mat-error>
</mat-form-field>

验证器功能：

import { AbstractControl, ValidatorFn } from '@angular/forms';

export function NoWhitespaceValidator(): ValidatorFn {

  return (control: AbstractControl): { [key: string]: any } => {

     // messy but you get the idea
    let isWhitespace = (control.value || '').trim().length === 0;
    let isValid = !isWhitespace;
    return isValid ? null : { 'whitespace': true }

  };
}

我登录到控制台，它仅在没有插入任何内容或仅在开头插入空格时才做出反应。这并没有给我任何东西，因为我想检查是否有前导或结尾空格，然后显示错误消息。

标签： angularvalidationangular-formsangular-validation

解决方案

我想你希望它看起来更像这样

let isWhitespace = (control.value || '').trim().length !== (control.value || '').length;

这样您就可以检查修剪后的长度是否与未修剪的长度相同，这将指示有效之前或之后是否有空格，因为修剪函数返回的字符串的开头和结尾都修剪了空格，所以如果长度不同，则空格已被修剪。

推荐阅读