Como eu posso exigir que um input tenha obrigatoriamente 4 caracteres [closed]

Eu tenho o seguinte código em typescript, que está limitando um input number a ter apenas 4 caracteres, mas eu preciso que esse mesmo código obrigue o usuário a digitar os 4 caracteres. Não pode ser 1, 2 ou 3, porque é um input que vai receber o ano (2024, 2025 e assim por diante).

limitInputLength(event: Event): void {
const input = event.target as HTMLInputElement;
input.value = input.value.replace(/[^0-9]/g, '').slice(0, 4); // remove não numéricos e limita a 4 dígitos
this.inputValue = input.value ? parseInt(input.value, 10) : null; // atualiza o modelo


}

<div class="input-group w-auto">
<span class="input-group-text">ANO</span>
<input
type="number"
class="form-control"
min="2000"
max="2099"
step="1"
(input)="limitInputLength($event)"
/>

</div>


Mesmo que minha alteração faça ser preciso deixar o input com bordas vermelhas ao se deparar com esse "erro" de digitar menos caracteres que 4, e também possa aparecer um balão de alerta exigindo que o usuário digite corretamente. Como eu poderia fazer isso?

Estou utilizando Angular 19 e Bootstrap 5.Imagem do input

Continue reading...