Angular 17 phone @if validator doesn't work

i'm using a @if() to validate if the phone number lenght has 10 characters (min and max) but it doesn't show the error message.

code html:

<div class="flex flex-col gap-2 justify-center text-title_purple font-robotoBlack text-[22px] ">
<label>Número de teléfono*</label>

<input
type="tel"
class="font-roboto text-[18px] border-2 border-primary rounded-lg p-3"
formControlName="phone"
placeholder="(Teléfono a diez dígitos)">

@if (myForm.get('phone')?.hasError('maxLength') && myForm.get('phone')?.hasError('minLength')) {
<span class="text-red-600 font-roboto text-[14px]">
Coloque un número telefónico válido
</span>
}
</div>


code angular: public myForm: FormGroup = this.fb.group({ phone: ['', [Validators.required, Validators.maxLength(10), Validators.minLength(10)]], email: ['', [Validators.required, Validators.pattern(this.validationsService.emailPattern)]] })

I want the message shows when i submit without the numbers or has less o more than 10 characters

Continue reading...