Validating usernames in an Angular frontend with Asp.Net Core Identity

example.html

<md-input-container>
    <input mdInput required di-validateUsername placeholder="Username" name="username" [(ngModel)]="registerModel.username" #username="ngModel">
    <md-hint *ngIf="!username.valid && !username.pristine && username.errors && username.errors.validateUsername">Username contains illegal character: "{{username.errors.validateUsername}}"</md-hint>
</md-input-container>

Startup.cs

public class Startup
{
  public void ConfigureServices(IServiceCollection services)
  {
    services.AddIdentity<ApplicationUser>(identityConfig => 
    {
      identityConfig.User.AllowedUsernameCharacters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-._@+ ";
    });
  }
}

validate-username.directive.ts

import { Directive } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';

@Directive({
    selector: '[di-validateUsername]',
    providers: [{ provide: NG_VALIDATORS, useExisting: ValidateUsernameDirective, multi: true }]
})
export class ValidateUsernameDirective implements Validator {

    private allowedCharacters: string = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-._@+ ';

    validate(control: AbstractControl): { [index: string]: any; } {
        if (!control.value) {
            return null;
        }
        if (typeof control.value !== 'string') {
            return { validateUsername: 'The property to validate must be of type \'string\'' };
        }
        for (var i = 0; i < control.value.length; i++) {
            if (this.allowedCharacters.indexOf(control.value[i]) < 0) {
                return { validateUsername: control.value[i]}
            }
        }
        return null;
    }
}