如何在焦点反应式表单文本字段上打开 angular 模态？

Question

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

模态打开功能：

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

要解决此问题，请使用 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

如何在焦点反应式表单文本字段上打开 angular 模态？

How to open angular modal on focus reactive form text field?

typescript

ng-bootstrap

angular

angular-reactive-forms

angular6