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

Question

当关注只读文本字段时，我需要打开角度(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 }" />

模式打开功能：

ngOnInit() {
this.basicAccountForm = this.formBuilder.group({
  username: ['', Validators.required],
});

}

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

Stackblitz Editor Link

Answer 1

要修复此使用事件。PreventDefault HTML

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

TS

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

派生示例：https://stackblitz.com/edit/angular-4md9fd