angular - use formControlName for custom input component in reactive form -

there custom input component , used in reactive form validation:

@component({     moduleid: module.id.tostring(),     selector: 'custom-select',     templateurl: 'custom-select.component.html',     styleurls: ['custom-select.component.css'] }) export class customselectcomponent {     @input() public items: selectmodel[];     public model: selectmodel;     constructor(private customselectservice: customselectservice) {         this.customselectservice.selected.subscribe((data: selectmodel) => {             this.model = data;         });     }     public newselect(select: selectmodel): void {         this.customselectservice.updateselected(select);     } } 

which works fine, using custom-select in reactive form , want validate below:

<custom-select id="country" [items]="selectitems" formcontrolname="country"></custom-select> <div *ngif=" myfrom.controls['country'].invalid && (myfrom.controls['country'].dirty               || myfrom.controls['country'].touched) " class="ha-control-alert">     <div *ngif="myfrom.controls['country'].haserror('required')">country required</div> </div> 

this how declare form in component

this.myfrom = this.formbuilder.group({     country: [null, validators.required], }) 

but when add formcontrolname validations, gets error says no value accessor form control name: 'country'. how should handle this?