A mensagem de "senha igual ao usuário" aparece quando não deveria.

Olá,

A mensagem de erro que deveria aparecer somente quando a senha e o usuário fossem iguais, está aparecendo independentemente do que eu coloque nos campos de usuário e senha. E não consigo resolver.

Arquivo novo-usuario.component.ts

import { UsuarioExisteService } from './usuario-existe.service';
import { NovoUsuarioService } from './novo-usuario.service';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NovoUsuario } from './novo-usuario';
import { minusculoValidator } from './minisculo.validator';
import { usuarioSenhaIguaisValidator } from './usuario-senha-iguais.validator';

@Component({
  selector: 'app-novo-usuario',
  templateUrl: './novo-usuario.component.html',
  styleUrls: ['./novo-usuario.component.css']
})
export class NovoUsuarioComponent implements OnInit {

  novoUsuarioForm!: FormGroup;

  constructor(
    private formBuilder: FormBuilder, 
    private novoUsuarioService: NovoUsuarioService, 
    private usuarioExisteService: UsuarioExisteService
    ) { }

  ngOnInit(): void {
    this.novoUsuarioForm = this.formBuilder.group(
      {
        email: ['', [ Validators.required, Validators.email ]],
        fullName: ['', [ Validators.required, Validators.minLength(4) ]],
        userName: ['', [ minusculoValidator, Validators.required ], [ this.usuarioExisteService.usuarioJaExiste() ]],
        password: [''],
      },
      {
        validators: [usuarioSenhaIguaisValidator],
      }
    );
  }

  cadastrar(): void {
    const novoUsuario = this.novoUsuarioForm.getRawValue() as NovoUsuario;
    console.log(novoUsuario);
  }

}

Arquivo usuario-senha-iguais-.validator.ts

import { FormGroup } from '@angular/forms';

export function usuarioSenhaIguaisValidator(formGroup: FormGroup) {
  const username = formGroup.get('userName')?.value ?? '';
  const password = formGroup.get('password')?.value ?? '';

  if (username.trim() + password.trim()) {
    return username !== password ? null : { senhaIgualUsuario: true };
  } else {
    return null;
  }
}

Arquivo template html

<h4 class="text-center">Registre-se e mostre o seu gatinho!</h4>
<form class="form mt-4" [formGroup]="novoUsuarioForm" (submit)="cadastrar()">
  <div class="form-group">
    <input 
      placeholder="Email"
      class="form-control"
      formControlName="email"
    />
    <app-mensagem 
      mensagem="Email obrigatório"
      *ngIf="novoUsuarioForm.get('email')?.errors?.required && novoUsuarioForm.get('email')?.touched">
    </app-mensagem>
    <app-mensagem 
      mensagem="Email em formato inválido"
      *ngIf="novoUsuarioForm.get('email')?.errors?.email && novoUsuarioForm.get('email')?.touched">
    </app-mensagem>
  </div>
  <div class="form-group">
    <input
      placeholder="Nome completo"
      class="form-control" 
      formControlName="fullName"
    />
    <app-mensagem 
      mensagem="Nome em formato inválido"
      *ngIf="novoUsuarioForm.get('fullName')?.errors && novoUsuarioForm.get('fullName')?.touched">
    </app-mensagem>
  </div>
  <div class="form-group">
    <input
      placeholder="Usuário"
      class="form-control" 
      formControlName="userName"
    />
    <app-mensagem 
      mensagem="Usuário somente com letras minúsculas"
      *ngIf="novoUsuarioForm.get('userName')?.errors?.minusculo && novoUsuarioForm.get('userName')?.touched">
    </app-mensagem>
    <app-mensagem 
      mensagem="Usuário já existe"
      *ngIf="novoUsuarioForm.get('userName')?.errors?.usuarioExistente">
    </app-mensagem>
    <app-mensagem 
      mensagem="Usuário obrigatório"
      *ngIf="novoUsuarioForm.get('userName')?.errors?.required && novoUsuarioForm.get('userName')?.touched">
    </app-mensagem>
  </div>
  <div class="form-group">
    <input
      placeholder="Senha"
      class="form-control"
      type="password"
      formControlName="password"
    />
    <app-mensagem
      mensagem="Senha deve ser diferente do usuário">
      *ngIf="novoUsuarioForm.errors?.senhaIgualUsuario"
    </app-mensagem>
  </div>
  <button class="btn btn-primary btn-block">
    Cadastrar
  </button>
</form>

<p>Já é um usuário? <a [routerLink]="['']">Faça login</a></p>