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

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编辑器链接

Answer 1

为了解决这个问题使用event.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