I’m trying to achieve the appearance of an error not only on Validator.required, but also if the user does not exist, through the use of loginValidator. (similar to logging into a Google account when you insert a username that does not exist). However I need to perform the user-check at the point of submission (currently not working), not at updateOn:'change' (currently working). Currently there’s no Back-end. I just need to match the username value with a string hardcoded inside Angular.

I would highly prefer to stick to formbuilder.group() and not use new FormGroup() since according to this it should work

Here’s my template

login-page.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>

And here is my .ts file

login-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
  }    
}

I already checked this and this.

What is happening as soon as I load the page is that the custom validator gets executed twice and in the console I see that console.log('ERROR') twice. Before I used to keep the formbuilder.group() function inside ngOnInit() and I observed that at start I was getting console.log('ERROR') 3 times so I thought of removing it from here. I actually do not really know what is the difference in keeping the form inside ngOnInit or not.
Moreover, when I submit the form, the username formControl value it’s not updated (value = “”).

I really have no idea what to do. The form template looks like is correctly binded to the formGroup, and I tried to set the updateOn param in every possible way.

Moreover, if you spot any bad practice, feel free to point it out in the comments. Thanks