Angular форма, чтобы поле не начиналось с пробела

Question

Я пытаюсь проверить поле имени с недопущением пробелов в начале, также пробовал это (Angular Блок ввода формы (пробел) REGEX ), но это не позволяет пробелы в все.

У меня есть что-то вроде этого:

<mat-error *ngIf="createEditForm.controls['nameCtrl'].hasError('required')">
    Your Name
</mat-error>

Также пробовал это ( Как проверить пробелы / пробелы? [Angular 2] ), но это позволяет полю начинаться с пробела, просто не позволяет пустое пространство без символов.

Answer 1

Я добавил валидатор обрезки, как сказал @AlfMoh.

import { Component } from '@angular/core';
import { ValidatorFn, FormControl } from '@angular/forms';

const trimValidator: ValidatorFn = (control: FormControl) => {
  if (control.value.startsWith(' ')) {
    return {
      'trimError': { value: 'control has leading whitespace' }
    };
  }
  if (control.value.endsWith(' ')) {
    return {
      'trimError': { value: 'control has trailing whitespace' }
    };
  }

  return null;
};

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  control = new FormControl('', trimValidator);
}

Работал как шарм

Answer 2

Вы можете создать собственный валидатор:

export function whitespaceValidator(form: FormCntrol): ValidationErrors {
    return form.value.startsWith(" ") ? {whitespace: true} : null;
  }
}

Добавить его в декларацию формы:

createEditForm: FormGroup = new FormGroup({
  nameCtrl: new FormControl('', whitespaceValidator)
})

И изменить html на:

<mat-error *ngIf="createEditForm.controls['nameCtrl'].hasError('whitespace')">
    Your Name
</mat-error>