Custom dropdown search control value accessor not getting selected when i set value in form control

This is my cutom dropdown search control value accessor . issue is when i set value in form control thats not getting selected in below control

 @Component({ selector: 'app-dropdown-search', templateUrl: './dropdown-search.component.html', styleUrls: ['./dropdown-search.component.scss'], providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: DropdownSearchComponent, multi: true, }, ], }) export class DropdownSearchComponent implements OnInit, ControlValueAccessor, DoCheck { @Input() itemSource: any[] = [ { Id: 1, Value: 'Tom Cruise', }, { Id: 2, Value: 'Maria Sharapova', }, { Id: 3, Value: 'James Bond', }, ]; selectedValue: any; searchText: string = ''; isDisabled: boolean = false; onChange: any = () => {}; onTouched: any = () => {}; @ViewChild(MatAutocompleteTrigger) autocomplete!: MatAutocompleteTrigger; filteredOptions$!: Observable<any[]>; private searchTextSubject = new BehaviorSubject<string>(''); formControl!: FormControl; constructor( private injector: Injector, private errorStateMatcher: ErrorStateMatcher ) {} ngOnInit(): void { //setting form control this.setFormControl(); this.filteredOptions$ = this.searchTextSubject.pipe( debounceTime(100), distinctUntilChanged(), // Only emit if the value has changed map((text) => this.filterOptions(text)) ); } ngDoCheck(): void { if (this.formControl.value == null) { this.searchText = ''; this.searchTextSubject.next(''); } } setFormControl() { const ngControl = this.injector.get(NgControl); if (ngControl instanceof FormControlName) { this.formControl = this.injector .get(FormGroupDirective) .getControl(ngControl); } else { this.formControl = (ngControl as FormControlDirective) .form as FormControl; } console.log(this.formControl); } getFormControlErrorState(control: FormControl): boolean { return this.errorStateMatcher.isErrorState(control, null); } writeValue(value: any): void { this.selectedValue = value; } registerOnChange(fn: any): void { this.onChange = fn; } registerOnTouched(fn: any): void { this.onTouched = fn; } setDisabledState(isDisabled: boolean): void { this.isDisabled = isDisabled; } selectOption(option: any): void { this.selectedValue = option; this.onChange(option); this.onTouched(); this.autocomplete.closePanel(); } onSearchTextChange(text: string): void { this.searchTextSubject.next(text); } filterOptions(text: string): any[] { if (text.trim() === '') { return []; } return this.itemSource.filter((item) => item.Value.toLowerCase().includes(text.toLowerCase()) ); } } 

<mat-form-field appearance="outline" class="form-field"> <mat-label>Employee</mat-label> <input matInput [placeholder]="'Search and Select...'" [formControl]="formControl" [(ngModel)]="searchText" [matAutocomplete]="auto" [class.invalid]="formControl.invalid && formControl.touched" (ngModelChange)="onSearchTextChange($event)" /> <mat-autocomplete #auto="matAutocomplete"> <mat-option *ngFor="let option of filteredOptions$ | async" [value]="option.Value" (click)="selectOption(option.Id)" > {{ option.Value }} </mat-option> </mat-autocomplete> <mat-error *ngIf="formControl.hasError('required')">Required</mat-error> </mat-form-field> 

When i set value for above cutom control thats not getting selected

 this.frmGroup = this.fb.group({ name: [1, Validators.required], isLocked: [{ value: false }], }); 

<div class="row"> <div class="col-md-4"> <app-dropdown-search formControlName="name"></app-dropdown-search> </div> </div> 

This above is my template form field of custom form control

I setting form control value like

 this.frmGroup = this.fb.group({ name: [1, Validators.required], isLocked: [{ value: false }], }); 

and also in template that i binding cutom control like

<div class="row"> <div class="col-md-4"> <app-dropdown-search formControlName="name"></app-dropdown-search> </div> </div> 

i expecting cutom control must be selected with itemsource of Id is 1