angular - サービスを使用してカスタム フォーム バリデーターを作成する方法は?

Question

カスタム フォーム バリデーター用の注入可能なサービスを作成しました。

    import { Injectable } from '@angular/core'
    import { FormControl } from '@angular/forms'
    import { Observable, of, timer } from 'rxjs'
    import { map, switchMap } from 'rxjs/operators'
    
    @Injectable({
      providedIn: 'root'
    })
    export class IsValidNicknameService {
    
      validate = (time: number = 500) => {
        return (input: FormControl) => {
          return timer(time).pipe(
            switchMap(() => this.isValidNickname(input.value)),
            map(isValid => {
              return isValid ? null : { shouldNotStartWithA: true }
            })
          )
        }
      }
    
      private isValidNickname(value: string): Observable<boolean> {
        return this.checkIfFirstLetterIsA(value)
      }
    
      private checkIfFirstLetterIsA(value: string): Observable<boolean> {
        const firstCharacter = value.toLowerCase().charAt(0)
        if (firstCharacter === 'a' || firstCharacter === 'à' || firstCharacter === 'ä' || firstCharacter === 'á' || firstCharacter === 'ã') {
          return of(false)
        } else {
          return of(true)
        }
      }
    
    }

次に、コントローラーで次のように呼び出します。

    import { IsValidNicknameService } from './src/Core/Services/isvalidnickname.service'
    createNicknamesGroup(): any {
      return new FormGroup({
        buildingRoom: new FormControl(this.mockBuildingRooms[0], Validators.required),
        nickname: new FormControl('', Validators.required, this.isValidNicknameService.validate())
      })
    }

それは機能しますが、良いアプローチではないと感じています。それを達成するためのより良い、より簡潔な方法はありますか?