Error message not showing for template-driven form validation?

Here's my code inside my .html file:

<select class="form-control" 
        name="profile" required
        *ngIf="page.options == 1"
        [ngClass]="{ ... }">
        <!-- some code -->
 <div *ngIf="profile?.invalid && (profile.dirty || profile.touched)" class="form-error">This field is required.</div>

What I'm encountering is that when I use *ngIf for the element profile, the error message doesn't become visible, but when I don't use *ngIf, the validation error shows.

What could be the reason behind this?