Angular Form Verification with ngif

Question

Got a form with a textbox for user first name. Trying to add some verifications.

When using the simple form -- a single error line like this it works fine

<div class="col-12 col-md-6">
            <input type="text" name="firstName" placeholder="* name" required [(ngModel)]="contact.firstName" class="form-control" minlength="2" pattern="[a-zA-Z ]*" #firstName="ngModel" [class.is-invalid]="firstName.invalid && firstName.touched" />
            <small [class.d-none]="firstName.valid || firstName.untouched" class="error-msg">* field is required & must have two or more letters from the abc</small>
</div>

When trying to separate the errors and display only relevant one, using *ngif results in the validation being forced on the input field, but the error message isn't showing.

<div class="col-12 col-md-6">
            <input type="text" name="firstName" placeholder="* name" required [(ngModel)]="contact.firstName" class="form-control" minlength="2" pattern="[a-zA-Z ]*" #firstName="ngModel" [class.is-invalid]="firstName.invalid && firstName.touched" />
            
            <div *ngif="firstName.errors && (firstName.invalid || firstName.touched)">
                <small class="error-msg" *ngif="firstName.errors.required">* is required</small>
                <small class="error-msg" *ngif="firstName.errors.pattern">* enter only letters</small>
                <small class="error-msg" *ngif="firstName.errors.minlength">* must have at least 2 letters</small>
            </div>
        </div>

Not sure what's the problem

Answer 1

I think *ngif is a typo and you should change it to *ngIf (camel case).