html:
<nz-form-item>
<ng-container *ngIf="to.label && to.hideLabel !== true">
<nz-form-label [nzRequired]="to.required && to.hideRequiredMarker !== true" [nzFor]="id">
{{ to.label }}
</nz-form-label>
<nz-select
[class.ng-dirty]="showError"
[nzPlaceHolder]="to.placeholder"
[formControl]="formControl"
[formlyAttributes]="field"
[nzMode]="to.multiple ? 'multiple' : 'default'"
[nzServerSearch]="true"
(nzOnSearch)="to.onSearch($event)"
nzAllowClear
nzShowSearch
>
<ng-container *ngFor="let item of to.options | formlySelectOptions: field | async">
<nz-option-group *ngIf="item.group" [nzLabel]="item.label">
<nz-option
*ngFor="let child of item.group"
[nzValue]="child.value"
[nzDisabled]="child.disabled"
[nzLabel]="child.label"
>
</nz-option>
</nz-option-group>
<nz-option
*ngIf="!item.group"
[nzValue]="item.value"
[nzDisabled]="item.disabled"
[nzLabel]="item.label"
></nz-option>
</ng-container>
</nz-select>
</ng-container>
<nz-form-control [nzValidateStatus]="errorState" [nzErrorTip]="errorTpl">
<ng-container #fieldComponent></ng-container>
<ng-template #errorTpl let-control>
<formly-validation-message [field]="field"></formly-validation-message>
</ng-template>
</nz-form-control>
</nz-form-item>
ts:
import { Component, ViewChild } from '@angular/core';
import { FieldType, FormlyFormOptions } from '@ngx-formly/core';
import { Observable, Subject } from 'rxjs';
import { NzAutocompleteComponent } from 'ng-zorro-antd';
@Component({
selector: 'ac-autocomplete',
templateUrl: "./ac-autocomplete.html",
})
export class AcFormlyAutoComplete extends FieldType {
constructor() {
super();
this.defaultOptions = {
templateOptions: {
options: [],
onSearch(value: string): void {
}
},
};
}
}