How to prevent selection of date values beyond today's date?

As shown below in the HTML code, I have a date-picker. I want to set the max and min values of the date programmatically from the typescript code. I want to set the min and the max values of the date so that the user cannot select any date beyond the max value set, and cannot select any date below the min value set.

The desired value for the [max] should be today's date.

I tried the following approach, but still, the user can select a date value greater than today's date.

    this.maxDateLimit = formatDate(new Date(), 'yyyy-MM-dd ', 'en')

Please let me know how to correct this.

html:

    <div id="idDateOfSprayContainer">
        <clr-date-container class="clsDateContainer">
            <label id="idDateOfSprayLabel">
                :
            </label>
            <input id="idDateOfSprayValue" class="clr-control-container" clrDate type="date" placeholder="" [(ngModel)]="iDatePasser.dateOfSpray"  name="dateOfSpray" (ngModelChange)="onDateOfSpraySet($event)"
                value="2021-07-21" [min]="minDateLimit" [max]="maxDateLimit" [disabled] = "!siteSelectionState"/>
        </clr-date-container>
    </div>

from How to prevent selection of date values beyond today's date?