nao aparece mensagem com erro

no cadastro.html ao colocar o nome ou em qlq outro campo onde seja required deveria apresentar uma mensagem logo abaixo do input com o erro mas nao está aparecendo, so aparece o input em vermelho mas a mensagem nao aparece.

**cadastro.TS **

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

  constructor(private router: Router) { }

  ngOnInit(): void {
  }

  cadastrar(form: NgForm){
    if(form.valid){
      this.router.navigate(['./sucesso'])
    }else{
      alert('Formulario invalido')
    }
      console.log(form.controls);
  }
}

cadastro.HTML

in class="principal">
    <h2 class="principal__titulo">Dados do cadastro</h2>

    <form #f="ngForm" (ngSubmit)="cadastrar(f)" class="principal__formulario" id="formulario">
        <h3 class="principal__subtitulo">Dados pessoais</h3>
        <div class="formulario__campo">
            <label class="campo__etiqueta" for="nome">Nome Completo</label>
            <input
                    name="nome"
                    id="nome"
                    class="campo__escrita"
                    ngModel
                    required
                    minlength="2"
                    #nome="ngModel"
            />
            <div *ngIf="(nome?.invalid && nome?.touched) || nome?.dirty">
                <app-mensagem
                        *ngIf="nome?.errors?.['required']"
                        mensagem="O campo de nome deve ser preenchido."
                ></app-mensagem>
                <app-mensagem
                        *ngIf="nome?.errors?.['minlength']"
                        mensagem="O nome deve ter no mínimo 2 caracteres."
                >
                </app-mensagem>
            </div>
        </div>

**mensagem.TS **

@Component({
  selector: 'app-mensagem',
  templateUrl: './mensagem.component.html',
  styleUrls: ['./mensagem.component.css']
})
export class MensagemComponent implements OnInit {
@Input() mensagem = '';
  constructor() { }

  ngOnInit(): void {
  }

}

**mensagem.HTML **sem nada