Angular 13 — updateOn: «отправить» не работает в FormBuilder.group() с пользовательским валидатором

Question

Пытаюсь добиться появления ошибки не только на Validator.required, но и если пользователя не существует, за счет использования loginValidator. (аналогично входу в учетную запись Google при вводе несуществующего имени пользователя). Однако мне нужно выполнить проверку пользователя в момент отправки (в настоящее время не работает ), а не в updateOn:'change'( на данный момент работает ). В настоящее время нет Back-end. Мне просто нужно сопоставить значение имени пользователя со строкой, жестко запрограммированной внутри Angular.

Я бы предпочел придерживаться formbuilder.group()и не использовать new FormGroup()так как согласно этому он должен работать

Вот мой шаблон

страница входа.component.html

      <div class="container">
<div [formGroup]="loginForm" class="loginform">

    <h2>{{'Login'| translate}}</h2>

    <mat-form-field appearance="fill">
        <mat-label>Username</mat-label>
        <input formControlName="username"  matInput type="text">           
        <mat-error *ngIf="loginForm.controls['username'].hasError('required')">Username required</mat-error>
    </mat-form-field>

    <span style="padding: 5px;"></span>
    <mat-form-field appearance="fill">
        <mat-label>Password</mat-label>
        <input formControlName="password" (keyup)="handleKeyUp($event)" matInput type="password">
        <mat-error *ngIf="loginForm.controls['password'].hasError('required')">Password required</mat-error>
    </mat-form-field>

    <span style="padding: 10px;"></span>
    <button mat-raised-button type="submit" (click)="onSubmit()" color="primary">{{'Login'| translate}}</button>
    <p class="no-account">{{"Don't have an account?" | translate}}</p>
    <a routerLink="/signup">{{"Sign Up Here"|translate}}</a>
    <app-footer class="footer"></app-footer>
</div>

<div class="image-container">        
    <div>
        <h1>Title<span style="color:#d11616;">></span></h1>
    </div>
</div>

А вот мой .ts файл

логин-page.component.ts

      /*-- all the imports and @Component metadata --*/


export class LoginPageComponent implements OnInit {

  loginForm: FormGroup = this.formBuilder.group({
    username:['', {
      validators:[Validators.required, this.loginValidator],
      updateOn:'change'}  
      ],
    password:['',[Validators.required]],
    
  })
  
  storedData!: string;

  constructor(
    private formBuilder:FormBuilder,
    private auth: AuthService,
    private route: Router,
    private localStorageService: LocalStorageService,
    private dialogService: ConfirmDialogService) { }

  ngOnInit(): void {

  }

  handleKeyUp(e:any){ 
    if(e.keyCode === 13){
      this.handleSubmit(e);
    }
  }

  handleSubmit(e:any){
    e.preventDefault();
    this.onSubmit()
  }

  onSubmit(){
    this.loginForm.updateValueAndValidity()

    const options = { 
      title: 'Error',
      message: 'Incorrect username or password',
      
      confirmText: 'Ok'
    };

    

    if(this.loginForm.status=== 'VALID'){   

      if(this.loginForm.get('username')!.value === 'admin' && this.loginForm.get('password')!.value === 'password' ){
        this.onSetData()
        this.route.navigate(['/app/home'])
      }else{
        this.dialogService.open(options)            
      }
    }else{
      this.loginForm.markAllAsTouched()
    }        
  }

  onSetData() {
    this.localStorageService.setItem(
      'UserData',
      this.loginForm.value
    );
  }

 

  loginValidator(control: FormControl) : {[s:string]:boolean} | null {        
    if(control.value !== 'admin'){    
      console.log('ERROR')    
      return {'loginValidator':true}    
    }    
    console.log('nope')
    return null
  }    
}

Я уже проверил это и это .

Что происходит, как только я загружаю страницу, так это то, что пользовательский валидатор выполняется дважды, и в консоли я вижу это дважды. Раньше я использовал функцию formbuilder.group() внутри ngOnInit()и я заметил, что в начале я получаю console.log('ERROR')3 раза, поэтому я думал удалить его отсюда. Я на самом деле не очень понимаю, какая разница держать форму внутри ngOnInit или нет. Более того, когда я отправляю форму, значение имени пользователя formControl не обновляется (значение = "").

Я действительно понятия не имею, что делать. Шаблон формы вроде корректно привязан к formGroup, и я всячески пытался установить параметр updateOn.

Кроме того, если вы заметите какую-либо плохую практику, не стесняйтесь указывать на нее в комментариях. Спасибо