angular - Bootstrap typescript display Required error for dropdown

Question

I want to throw an error message when the user doesn't select an option and instead just keep the 1st option (which is the placeholder).

How can I throw an error when the default value is selected ?

My workings so far is displayed below and it doesn't show the expected result.

<select class="custom-select"  id="nm" required="required" [(ngModel)]="person.id" name="person-Id"
    #person="ngModel" [ngClass]="{ 'is-invalid': person.invalid && (person.dirty || person.touched || newForm.submitted), 'is-valid': person.valid && (person.dirty || person.touched || newForm.submitted) }">

    <option [ngValue]="0" disabled selected hidden>Select name</option>
    <option [ngValue]="1">xxx</option>
    <option [ngValue]="2">ttt</option>
</select>
<span class="text-danger" *ngIf="person.invalid && (person.dirty || person.touched || newForm.submitted) && person.errors?.required">select name</span>

question from:https://stackoverflow.com/questions/65910521/bootstrap-typescript-display-required-error-for-dropdown

Answer 1

Waitting for answers