How select tag's states is different from other input's tags in Angular?

Question

I am trying to show error for a select tag on touched state ( when field touched ). But this is not working. It is working fine for other input tags.

Here's my code.

            <div class="form-group">
          <select class="form-control" formControlName="species">
            <option value="">Select Species</option>
            <option *ngFor="let item of allSpecies" value="{{item?.species?._id}}"> 
                    {{item?.species?.name}}</option>
          </select>
          <p class="text-danger" 
          *ngIf="dummyProfileForm.controls.species.hasError('required') && 
            dummyProfileForm.controls.species.touched">
            Species is Required
          </p>
        </div>

Answer 1

you forgot to put required tag inside try again with

 <select class="form-control" formControlName="species" required>