md-error with *ngIf having formcontrolsvalidation in md-input-container not working

md-error with *ngIf not working whereas using md-error outside of md-input-container with *ngIf works as expected

Here is my code:

<form [formGroup]="searchForm" (ngSubmit)="onSubmit()" novalidate>
        <md-input-container>
            <input mdInput type="text" placeholder="First Name"
                   formControlName="firstName" >
        </md-input-container>
        <md-input-container>
            <input mdInput type="text" placeholder="Middle Name"
                   formControlName="middleName">
            <md-error  *ngIf="!searchForm.value.firstName && !searchForm.pristine">
                Please Enter Middle Name with First Name
            </md-error>
        </md-input-container>
         <button md-raised-button> Search </button>
         <button md-raised-button type="reset"> Clear </button>
</form>

How can I resolve this?

[willshowell]

@divyameher https://material.angular.io/components/input/overview#custom-error-matcher 😁

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}