Why I'm getting required error after selecting the first value in a select in angular 9 app?

Issue

I have the following template which include select component with options:

 

    <select class="selectpicker_std" [(ngModel)]="fund.subscription_frequency" #subscriptionFrequency="ngModel" name="subscription_frequency" [compareWith]="compareSubscriptionFrequenciesByOptionId" required>
    <option [ngValue]="null">{{defaultSelect}}</option>
         <option *ngFor="let sf of frequencies" [value]="sf.frequency">{{sf.name}}</option>
     </select>
     <div *ngIf="subscriptionFrequency.errors && (subscriptionFrequency.touched || fund3FormDirective.submitted)">
         <div class="error_message" *ngIf="subscriptionFrequency?.errors?.required">
             <span class="e_arrow"></span>
             <i>Please select subscription frequency</i>
         </div>
     </div>

This is the compare method:

    compareSubscriptionFrequenciesByOptionId(idFirst, idSecond) {       
        return idFirst && idSecond && idFirst.frequency == idSecond.frequency;         
      }

What's happened is this: scenario 1: When selecting the first value the required error message appear. Scenario 2: when selecting any other value, there is no error and the data save with no issue.

Solution

After removing the compare method all works fine:

 [compareWith]="compareSubscriptionFrequenciesByOptionId"

Answered By - user2304483