Question

我不知道我在做什么错。我的空白验证器无法正常工作。

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 }

  };
}

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

Answer 1

我想您希望它看起来像这样，

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

这样，您将检查修剪后的长度是否与非修剪后的长度相同，这将指示有效前后是否存在空格，因为修剪功能会返回在开头和结尾处修剪有空白的字符串结束，因此，如果长度不相同，则空格已被修剪。

角空白验证器工作错误

1 个答案: