javascript - Angular 中 mat-autocomplete 中的字符串替换

Question

我是初学者网络开发人员。我有这个代码:

<input id="street{{sid}}" 
       name="street{{sid}}" 
       type="text" 
       placeholder="" 
       class="form-control"
       [(ngModel)]="adres.street" 
       #street="ngModel" 
       required="" 
       (keydown)="this.removeSpecialCharactersFromStreet($event)"
       (keyup)="this.removeSpecialCharactersFromStreet($event)"
       capitalize-first="true">

removeSpecialCharactersFromStreet(event) {
  this.adres.street = event.target.value.replace(/[&\/\\#,+()$~%.\]'":*?<>{}@^&=;'"_!\[]/g, '');
}

而且效果很好。

现在我需要将此函数添加到 mat-autocomplete 中:

removeSpecialCharactersFromCity(event) {
  this.adres.city = event.target.value.replace(/[&\/\\#,+()$~%.\]'":*?<>{}@^&=;'"_!\[]/g, '');
}

<mat-autocomplete 
       autoActiveFirstOption 
       #auto="matAutocomplete"
       (keydown)="this.removeSpecialCharactersFromCity($event)" 
       (keyup)="this.removeSpecialCharactersFromCity($event)">
  <mat-option *ngFor="let option of cityFilteredOptions" 
              [value]="option"
              (keydown)="this.removeSpecialCharactersFromCity($event)" 
              (keyup)="this.removeSpecialCharactersFromCity($event)">
    {{option}}
  </mat-option>
</mat-autocomplete>

而且它不起作用。 我该如何修复它？

请帮助我

Answer 1

您可以将自动完成功能连接到您自己的输入，然后像处理常规输入一样操作输入值:

<input
  matInput
  [(ngModel)]="address.city"
  [matAutocomplete]="auto"
  (keydown)="removeSpecialCharactersFromCity($event)"
  (keyup)="removeSpecialCharactersFromCity($event)">

<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
  <mat-option *ngFor="let option of cityFilteredOptions" [value]="option">
    {{option}}
  </mat-option>
</mat-autocomplete>

Working example in stackblitz