英文:
String replace in mat-autocomplete in Angular
问题
我是初学者的Web开发者。我有以下代码：
<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>
但它不起作用。
我该如何修复它？
请帮助我。
英文:
I am beginner webdeveloper. I have this code:
<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, '');
}
and it works fine.
Now I need to add this function to 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>
And it doesn't work.
How can I fix it?
Please help me
答案1
得分: 2
你可以将自动完成与你自己的输入连接起来，然后像对常规输入一样操纵输入值：
<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>
英文:
You can connect autocomplete to your own input and then manipulate the input value as you did to the regular input:
<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>
答案2
得分: 0
更改mat-autocomplete上的(keydown)和(keyup)事件绑定为(input)事件绑定。
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (input)="removeSpecialCharactersFromCity($event)">
<mat-option *ngFor="let option of cityFilteredOptions" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
更新removeSpecialCharactersFromCity函数以直接使用事件对象。
removeSpecialCharactersFromCity(event: any) {
this.adres.city = event.target.value.replace(/[&\/\\#,+()$~%.\]'":*?<>{}@^&=;'"_!\[]/g, '');
}
编辑：
将
(input)="removeSpecialCharactersFromCity($event)"
更改为
(input)="removeSpecialCharactersFromCity($event.target.value)"
英文:
Change the (keydown) and (keyup) event bindings on mat-autocomplete to (input) event binding.
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (input)="removeSpecialCharactersFromCity($event)">
<mat-option *ngFor="let option of cityFilteredOptions" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
Update the removeSpecialCharactersFromCity function to use the event object directly.
removeSpecialCharactersFromCity(event: any) {
this.adres.city = event.target.value.replace(/[&\/\\#,+()$~%.\]'":*?<>{}@^&=;'"_!\[]/g, '');
}
Edit:
Change
(input)="removeSpecialCharactersFromCity($event)"
to
(input)="removeSpecialCharactersFromCity($event.target.value)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论