FormControl is invalid on first touch, need to be invalid only if it value not provided or uclicked

Question

I have kendo dropdown list

Here is view code

  <kendo-dropdownlist valueField="id"
                    textField="name"
                    [data]="data"
                    [formControl]="control"
                    [itemDisabled]="isItemDisabled"
                    [valuePrimitive]="valuePrimitive"
                    [filterable]="isFilterChangeObserved"
                    [popupSettings]="popupSettings"
                    (click)="onValueTouched()"
                    (filterChange)="filterChange.emit($event)">
  <ng-template kendoDropDownListValueTemplate
               let-dataItem>
    <ng-container *ngIf="dataItem; else placeholderTemplate"
                  [ngTemplateOutlet]="customDropDownListValueTemplate ? customDropDownListValueTemplate : defaultDropDownListValueTemplate"
                  [ngTemplateOutletContext]="{$implicit: dataItem}">
    </ng-container>

    <app-clear-button *ngIf="dropdownListElement && control.value && control.disabled === false"
                      [listeningNativeElement]="dropdownListElement.nativeElement"
                      (clear)="onClear()">
    </app-clear-button>

    <ng-template #defaultDropDownListValueTemplate
                 let-dataItem>
      {{dataItem.name}}
    </ng-template>

    <ng-template #placeholderTemplate>
      <span class="placeholder">{{placeholder ?? 'Select item'}}</span>
    </ng-template>
  </ng-template>

  <ng-template kendoDropDownListNoDataTemplate>
    <div #dropDownListNoDataTemplate>
      <ng-content select="[dropDownListNoData]"></ng-content>
    </div>
    <!-- // NOTE: check if ng-content provided -->
    <div *ngIf="!dropDownListNoDataTemplate.childElementCount">No data found</div>
  </ng-template>

  <ng-template *ngIf="customDropDownListItemTemplate"
               kendoDropDownListItemTemplate
               let-dataItem>
    <ng-container *ngTemplateOutlet="customDropDownListItemTemplate; context:{ $implicit: dataItem }"></ng-container>
  </ng-template>
</kendo-dropdownlist>

Component code

    export abstract class DropdownBaseComponent<T extends IDataItem | number | string> {
  @Input()
  public control!: FormControl;

  @Input()
  public placeholder: string;

  @Output()
  public readonly filterChange = new EventEmitter<string>();

  @Output()
  public readonly valueChange = new EventEmitter<T>();

  @ViewChild(DropDownListComponent, { static: true, read: ElementRef })
  public dropdownListElement!: ElementRef;

  @ContentChild(DropdownListValueTemplateDirective, { static: true, read: TemplateRef })
  public customDropDownListValueTemplate!: TemplateRef<DropdownListValueTemplateDirective>;

  @ContentChild(DropdownListItemTemplateDirective, { static: true, read: TemplateRef })
  public customDropDownListItemTemplate!: TemplateRef<DropdownListItemTemplateDirective>;

  public get isFilterChangeObserved(): boolean {
    return this.filterChange.observers.length > 0;
  }

  public readonly popupSettings: PopupSettings = { popupClass: 'h-combobox-popup' };

  public valuePrimitive = false;

  public isItemDisabled: ItemDisabledFn = () => false;

  public onValueTouched(): void {
    console.log(this.control);
    this.control.markAsTouched();
  }

  public onClear(): void {
    this.control.setValue(null);
  }
}

Now when I click dropdown, it hightlight as red

I need it to be highlighted, only when value not selected and dropdown is closed