How to show md-error in material select box in angular 2?

Question

I am using reactive forms for validation in my angular 2 project. I want to highlight the fields that are invalid when 'submit' is pressed. I have achieved this in input tag by using md-Error but i am not able to do it in md-Select. Can anybody help?

Screenshot: https://i.sstatic.net/TPkqQ.png

This is an example of md-select that i am using:

<md-select placeholder="Listing Type" formControlName='listingType' required >
              <md-option *ngFor="let type of listType" [value]="type">
                {{ type }}
              </md-option>
            </md-select>

This is the md-input that i am using:

<md-input-container class="more-width">
              <input mdInput formControlName='price' required placeholder="Price">
              <md-error>Please Enter Price</md-error>
            </md-input-container>

This is the Validation that i am applying

 this.listingForm = this.fb.group({
      propertyType: ['', Validators.required]
})

Answer 1

This error has now been resolved. You just need to place the mat-error outside the mat-select and inside the mat-form-field. Here is an example

<mat-form-field appearance="fill">
  <mat-label>Favorite animal</mat-label>
   <mat-select [formControl]="animalControl" required>
    <mat-option>--</mat-option>
    <mat-option *ngFor="let animal of animals" [value]="animal">
      {{animal.name}}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="animalControl.hasError('required')">Please choose an 
      animal</mat-error>
</mat-form-field>

For detail you can check the following link Error Messages in Angular form fields