Не удается прочитать свойство пользовательского Validator и требуется - Angular

Question

Я пытаюсь создать пользовательские валидаторы, которые выдают пользовательское сообщение, когда он или она оставляют пробел в тексте, но я получил эту ошибку.

• 1-Не удается прочитать свойство 'removeSpaceFromUserName' с неопределенным значением
• 2-Невозможно прочитать свойство 'required' из null в Object.eval [как updateDirectives]

Вот HTML-код компонента

    <form [formGroup]='form'>
        <div class="form-group">
            <label for="username">Username</label>
            <input 
                formControlName='username'
                id="username" 
                type="text" 
                class="form-control">
                <div *ngIf="username.touched && username.touched"  class="alert alert-danger">
                     <div *ngIf="username.errors.required"> You need to enter user name</div>
                     <div *ngIf="username.errors.minlength"> Min Length is 
                        {{ username.errors.minLength.requiredLength}}
                        </div>
                      <div *ngIf="UserNameValiditors.removeSpaceFromUserName">
                           removeSpaceFromUserName </div>   
                </div>
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input 
                formControlName='password'
                id="password" 
                type="text" 
                class="form-control">
        </div>
        <button class="btn btn-primary" type="submit">Sign Up</button>
    </form>

Вот пользовательский класс валидатора

import { AbstractControl, ValidationErrors } from "@angular/forms";

export class UserNameValiditors {
    static removeSpaceFromUserName(control: AbstractControl): ValidationErrors | null {
        if ((control.value as string).indexOf(' ') >= 0) {
            return {
                removeSpaceFromUserName: true
            };
        }
        else {
            return null;
        }
    }
}

import { Component } from '@angular/core';
import { FormControl , FormGroup , Validators } from "@angular/forms";
import { UserNameValiditors } from './UserNameValditors';

@Component({
  selector: 'signup-form',
  templateUrl: './signup-form.component.html',
  styleUrls: ['./signup-form.component.css']
})
export class SignupFormComponent {

  form= new FormGroup(
    {
       username  : new FormControl('',
      [
        Validators.required,
        Validators.minLength(3) ,
        UserNameValiditors.removeSpaceFromUserName
      ]) ,
       password  : new FormControl('',Validators.required)
    });

    get username()
    {
      return this.form.get('username');
    }
  
}

Answer 1

Вы можете попробовать это решение.

Я создал демо на Stackblitz

app.component.ts

myForms: FormGroup;

  constructor(fb: FormBuilder) {

    this.myForms = fb.group({
      username: [null, Validators.compose([
        Validators.required, Validators.minLength(3), usernameValidator])],
      password: [null, [
        Validators.required]]
    });
  }

app.component.html

<form [formGroup]="myForms">

    <label>User Name : 
        <input type="text"  formControlName="username">
    </label><br>

    <div class="errors" *ngIf="myForms.get('username').invalid && (myForms.get('username').touched || myForms.get('username').dirty)">

        <div *ngIf="myForms.get('username').hasError('required')">
            username is required
        </div>

        <div *ngIf="myForms.get('username').errors.minlength">
            username must be at least 3 characters
        </div>

        <div class="error-text" *ngIf="myForms.get('username').hasError('removeSpaceFromUserName')">
            removeSpaceFromUserName  
        </div>
    </div>

  <div class="form-group">
            <label for="password">Password</label>
            <input 
                formControlName='password'
                id="password" 
                type="text" 
                class="form-control">
        </div>
        <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

Answer 2

Используйте hasError(), чтобы проверить, присутствует ли определенная ошибка в форме.

HTML-код

<div *ngIf="username.hasError('required')"> You need to enter user name</div>
            <div *ngIf="username.hasError('minlength')"> Min Length is {{ username.hasError('minLength')}}
            </div>f
            <div *ngIf="username.hasError('removeSpaceFromUserName')">
                removeSpaceFromUserName </div>
</div>

Ваш рабочий код здесь