相关疑难解决方法(0)

有一个自定义的输入组件，它以反应形式用于验证：

@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);
    }
}

效果很好，我正在custom-select以反应形式使用，并希望按如下所示进行验证：

<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 is required</div>
</div>

这就是我在组件中声明表格的方式

this.myFrom = this.formBuilder.group({
    country: [null, Validators.required],
})

但是当我添加formControlName验证时，会出现错误，提示名称为'country'的表单控件没有值访问器。我该如何处理？