Skip to content

Instantly share code, notes, and snippets.

@pluveto
Created February 22, 2020 09:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pluveto/7798ef873d485961df7cfe200c3810e0 to your computer and use it in GitHub Desktop.
Save pluveto/7798ef873d485961df7cfe200c3810e0 to your computer and use it in GitHub Desktop.

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 {
        }
      },

    };
  }

}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment