Question

我在使用Angular 9验证自动完成功能时遇到问题，当它仅在触摸时为空，但无法正常工作，并且触摸始终为假。

我使用的模块链接：

https://www.npmjs.com/package/angular-ng-autocomplete

这是我的代码：

    <div class="ng-autocomplete">
  <ng-autocomplete #autoComplete
    [data]="countries"
    [searchKeyword]="keyword"
    placeHolder="Enter the Country Name"
    (selected)='selectEvent($event)'
    (inputChanged)='onChangeSearch($event)'
    (inputFocused)='onFocused($event)'
    historyIdentifier="countries"
    [itemTemplate]="itemTemplate"
    [formControl] = "country"
    [notFoundTemplate]="notFoundTemplate">
  </ng-autocomplete>

  <ng-template #itemTemplate let-item>
    <a [innerHTML]="item.name"></a>
  </ng-template>

  <ng-template #notFoundTemplate let-notFound>
    <div [innerHTML]="notFound"></div>
  </ng-template><br><br><br><br>
  <span *ngIf="country.touched && !country.value"> select something </span>
</div>

Answer 1

我遇到了同样的问题。问题是formControlName是在“ ng-autocomplete”上标记的，而不是在我们通常使用的“ input” html标记上的。我使用了ng-autocomplete中的(inputFocused)事件和Reactive表单中的markAsRead()事件来解决此问题，以将表单控件标记为在用户将重点放在自动完成输入之后已读取。

HTML代码：

<ng-autocomplete 
  [data]="data"
  [searchKeyword]="keyword"
  (selected)='selectEvent($event)'
  (inputChanged)='onChangeSearch($event)'
  (inputFocused)='onFocused($event)'
  [itemTemplate]="itemTemplate"
  [notFoundTemplate]="notFoundTemplate">                                 
</ng-autocomplete>

（inputFocused）将在ts中触发markAsRead（）方法，因此我将更改表单控件的touched属性。

打字稿代码：

markAsRead() {
    this.form.get('from_control_name').markAsTouched();
  }

这就是我更改触摸输入属性的方式。

希望对所有人有帮助：）。

文档：ng-autocomplete和reactive forms。

angular-ng-autocomplete触摸事件不起作用

1 个答案: