Angular 如何在焦点反应形式文本字段上打开角度模式？

当焦点集中在只读文本字段上时，我需要打开angular

（Ngbmodal）

模式。但当我这样做时，它会打开模式，但在控制台中显示错误，无法关闭模式

错误：

文本字段：

<input type="text" [readonly]="true" placeholder="Please select a user" (focus)="openUserSelectModal()" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />

}

---

要修复此问题，请使用event.PreventDefault Html

<input type="text" [readonly]="true" placeholder="Please select a user" (focus)="openModal($event)" formControlName="username" class="form-control"/>

---

分叉示例：

是的，我在父组件上添加了这个，其中调用模式打开。但是不起作用。请尝试此ngAfterViewChecked（）{//您的代码更新模型this.cdr.detectChanges（）；}谢谢，但不起作用。我想我做错了什么。这是stackblitz链接。@Randika现在检查一下

openUserSelectModal() {
const modal = this.modalService.open(UserSelectorComponent, { size: 'sm', container: 'nb-layout' });

modal.result.then((username) => {
  if (username) {
    this.basicAccountForm.controls['username'].setValue(username);
  }
}, () => {
  this.basicAccountForm.controls['username'].setValue(null);
});
 }

<input type="text" [readonly]="true" placeholder="Please select a user" (focus)="openModal($event)" formControlName="username" class="form-control"/>

 openModal(event) {
    event.srcElement.blur();
  event.preventDefault();
    const userModal = this.modalService.open(UserComponent, { size: 'sm' });
  }