在我的项目中,我想要进行验证并将初始值设置为自动完成。假设:如果用户没有在自动完成框中选择任何内容,我们应该显示验证错误:“请选择国家/地区”。
代码:
<div style="text-align:center">
<h1>
Angular autocomplete
</h1>
<img width="100" alt="Angular Logo"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<div class="ng-autocomplete">
<ng-autocomplete
[data]="countries"
[searchKeyword]="keyword"
placeHolder="Enter the Country Name"
(selected)='selectEvent($event)'
(inputChanged)='onChangeSearch($event)'
(inputFocused)='onFocused($event)'
historyIdentifier="countries"
[itemTemplate]="itemTemplate"
[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>
</div>
组件.ts:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
keyword = 'name';
public countries = [
{
id: 1,
name: 'Albania',
},
{
id: 2,
name: 'Belgium',
},
{
id: 3,
name: 'Denmark',
},
{
id: 4,
name: 'Montenegro',
},
{
id: 5,
name: 'Turkey',
},
{
id: 6,
name: 'Ukraine',
},
{
id: 7,
name: 'Macedonia',
},
{
id: 8,
name: 'Slovenia',
},
{
id: 9,
name: 'Georgia',
},
{
id: 10,
name: 'India',
},
{
id: 11,
name: 'Russia',
},
{
id: 12,
name: 'Switzerland',
}
];
selectEvent(item) {
// do something with selected item
}
onChangeSearch(search: string) {
// fetch remote data from here
// And reassign the 'data' which is binded to 'data' property.
}
onFocused(e) {
// do something
}
}
查看完整项目链接:https://stackblitz.com/edit/angular-ng-autocomplete
最佳答案
我也遇到了类似的问题。我必须在 http 调用的 subscribe() 中设置 ng-autocomplete 的值。
我在 .ts 文件中声明我的自动完成功能:
@ViewChild('aziendaAutocomplete') aziendaAutocomplete: 任意;
然后我设置初始值和输入值:
this.aziendaAutocomplete.initialValue = this.aziendeList[0]?.FirmName;
this.aziendaAutocomplete.searchInput.nativeElement.value = this.aziendeList[0]?.FirmName;
就我而言,keyword='FirmName' 并且有效!
<div class="ng-autocomplete">
<ng-autocomplete
#aziendaAutocomplete
id="aziendaAutocompleteID"
[data]="aziendeList"
placeHolder="Cerca un produttore..."
[searchKeyword]="keyword"
(selected)='selectEvent($event)'
(inputChanged)='onChangeSearch($event)'
(inputCleared)="onClearSearch()"
[itemTemplate]="itemTemplate"
[notFoundTemplate]="notFoundTemplate"
minQueryLength="3"
[notFoundText]="notFoundText">
</ng-autocomplete>
<input type="number" formControlName="azienda" style="visibility: hidden"/>
<div *ngIf="submitted && formParamsControl.azienda.errors" [ngClass]="(submitted && formParamsControl.azienda.errors) ? 'invalid-feedback d-block' : '' ">
<div *ngIf="formParamsControl.azienda.errors.required">Selezionare il produttore</div>
</div>
<ng-template #itemTemplate let-item>
<a [innerHTML]="item.FirmName"></a>
</ng-template>
<ng-template #notFoundTemplate let-notFound>
<div [innerHTML]="notFoundText"></div>
</ng-template>
</div>
关于javascript - 如何在 Angular 7 中设置 ng 自动完成的初始值和验证?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56168857/