ngx-formly-zorro-antd 14.1.0 → 14.2.1

package/fesm2020/ngx-formly-zorro-antd-textarea.mjs

@@ -4,11 +4,13 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { ReactiveFormsModule } from '@angular/forms';
-import * as i4 from '@ngx-formly/core';
+import * as i5 from '@ngx-formly/core';
 import { FieldType, FormlyModule } from '@ngx-formly/core';
 import { FormlyNzFormFieldModule } from 'ngx-formly-zorro-antd/form-field';
 import * as i3 from 'ng-zorro-antd/input';
 import { NzInputModule } from 'ng-zorro-antd/input';
+import * as i4 from 'ng-zorro-antd/icon';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 
 class FormlyFieldTextarea extends FieldType {
     constructor() {
@@ -24,23 +26,37 @@ class FormlyFieldTextarea extends FieldType {
 }
 FormlyFieldTextarea.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: FormlyFieldTextarea, deps: null, target: i0.ɵɵFactoryTarget.Component });
 FormlyFieldTextarea.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: FormlyFieldTextarea, selector: "formly-field-textarea", usesInheritance: true, ngImport: i0, template: `
-    <nz-textarea-count
-      *ngIf="props['maxCharacterCount']; else textarea"
-      [nzMaxCharacterCount]="props['maxCharacterCount']"
-    >
-      <textarea
-        [formControl]="formControl"
-        [formlyAttributes]="field"
-        [ngClass]="props['className']"
-        [rows]="props.rows"
-        [cols]="props.cols"
-        nz-input
-        [nzBorderless]="props['borderless']"
-        [nzAutosize]="props['autosize']!"
-      ></textarea>
-    </nz-textarea-count>
+    <ng-container [ngSwitch]="props.type">
+      <ng-container *ngSwitchCase="'count'">
+        <nz-textarea-count [nzMaxCharacterCount]="props['maxCharacterCount'] || 0">
+          <textarea
+            [formControl]="formControl"
+            [formlyAttributes]="field"
+            [ngClass]="props['className']"
+            [rows]="props.rows"
+            [cols]="props.cols"
+            nz-input
+            [nzBorderless]="props['borderless']!!"
+            [nzAutosize]="props['autosize']!!"
+          ></textarea>
+        </nz-textarea-count>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="'clear'">
+        <nz-input-group
+          class="ant-input-affix-wrapper-textarea-with-clear-btn"
+          [nzSuffix]="textAreaClearTpl"
+        >
+          <ng-container *ngTemplateOutlet="textareaTpl"> </ng-container>
+        </nz-input-group>
+      </ng-container>
+
+      <ng-container *ngSwitchDefault>
+        <ng-container *ngTemplateOutlet="textareaTpl"> </ng-container>
+      </ng-container>
+    </ng-container>
 
-    <ng-template #textarea>
+    <ng-template #textareaTpl>
       <textarea
         [formControl]="formControl"
         [formlyAttributes]="field"
@@ -48,33 +64,59 @@ FormlyFieldTextarea.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
         [rows]="props.rows"
         [cols]="props.cols"
         nz-input
-        [nzBorderless]="props['borderless']"
-        [nzAutosize]="props['autosize']!"
+        [nzBorderless]="props['borderless']!!"
+        [nzAutosize]="props['autosize']!!"
       ></textarea>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.NzTextareaCountComponent, selector: "nz-textarea-count", inputs: ["nzMaxCharacterCount", "nzComputeCharacterCount", "nzFormatter"] }, { kind: "directive", type: i3.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "directive", type: i3.NzAutosizeDirective, selector: "textarea[nzAutosize]", inputs: ["nzAutosize"], exportAs: ["nzAutosize"] }, { kind: "directive", type: i4.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+
+    <!-- 清除数据 -->
+    <ng-template #textAreaClearTpl>
+      <span
+        nz-icon
+        class="ant-input-clear-icon"
+        nzTheme="fill"
+        nzType="close-circle"
+        *ngIf="formControl.value"
+        (click)="formControl.reset()"
+      ></span>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.NzTextareaCountComponent, selector: "nz-textarea-count", inputs: ["nzMaxCharacterCount", "nzComputeCharacterCount", "nzFormatter"] }, { kind: "directive", type: i3.NzInputDirective, selector: "input[nz-input],textarea[nz-input]", inputs: ["nzBorderless", "nzSize", "nzStatus", "disabled"], exportAs: ["nzInput"] }, { kind: "component", type: i3.NzInputGroupComponent, selector: "nz-input-group", inputs: ["nzAddOnBeforeIcon", "nzAddOnAfterIcon", "nzPrefixIcon", "nzSuffixIcon", "nzAddOnBefore", "nzAddOnAfter", "nzPrefix", "nzStatus", "nzSuffix", "nzSize", "nzSearch", "nzCompact"], exportAs: ["nzInputGroup"] }, { kind: "directive", type: i3.NzAutosizeDirective, selector: "textarea[nzAutosize]", inputs: ["nzAutosize"], exportAs: ["nzAutosize"] }, { kind: "directive", type: i3.NzInputGroupWhitSuffixOrPrefixDirective, selector: "nz-input-group[nzSuffix], nz-input-group[nzPrefix]" }, { kind: "directive", type: i4.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "directive", type: i5.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: FormlyFieldTextarea, decorators: [{
             type: Component,
             args: [{
                     selector: 'formly-field-textarea',
                     template: `
-    <nz-textarea-count
-      *ngIf="props['maxCharacterCount']; else textarea"
-      [nzMaxCharacterCount]="props['maxCharacterCount']"
-    >
-      <textarea
-        [formControl]="formControl"
-        [formlyAttributes]="field"
-        [ngClass]="props['className']"
-        [rows]="props.rows"
-        [cols]="props.cols"
-        nz-input
-        [nzBorderless]="props['borderless']"
-        [nzAutosize]="props['autosize']!"
-      ></textarea>
-    </nz-textarea-count>
+    <ng-container [ngSwitch]="props.type">
+      <ng-container *ngSwitchCase="'count'">
+        <nz-textarea-count [nzMaxCharacterCount]="props['maxCharacterCount'] || 0">
+          <textarea
+            [formControl]="formControl"
+            [formlyAttributes]="field"
+            [ngClass]="props['className']"
+            [rows]="props.rows"
+            [cols]="props.cols"
+            nz-input
+            [nzBorderless]="props['borderless']!!"
+            [nzAutosize]="props['autosize']!!"
+          ></textarea>
+        </nz-textarea-count>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="'clear'">
+        <nz-input-group
+          class="ant-input-affix-wrapper-textarea-with-clear-btn"
+          [nzSuffix]="textAreaClearTpl"
+        >
+          <ng-container *ngTemplateOutlet="textareaTpl"> </ng-container>
+        </nz-input-group>
+      </ng-container>
+
+      <ng-container *ngSwitchDefault>
+        <ng-container *ngTemplateOutlet="textareaTpl"> </ng-container>
+      </ng-container>
+    </ng-container>
 
-    <ng-template #textarea>
+    <ng-template #textareaTpl>
       <textarea
         [formControl]="formControl"
         [formlyAttributes]="field"
@@ -82,10 +124,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
         [rows]="props.rows"
         [cols]="props.cols"
         nz-input
-        [nzBorderless]="props['borderless']"
-        [nzAutosize]="props['autosize']!"
+        [nzBorderless]="props['borderless']!!"
+        [nzAutosize]="props['autosize']!!"
       ></textarea>
     </ng-template>
+
+    <!-- 清除数据 -->
+    <ng-template #textAreaClearTpl>
+      <span
+        nz-icon
+        class="ant-input-clear-icon"
+        nzTheme="fill"
+        nzType="close-circle"
+        *ngIf="formControl.value"
+        (click)="formControl.reset()"
+      ></span>
+    </ng-template>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
@@ -97,11 +151,13 @@ FormlyNzTextareaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", v
 FormlyNzTextareaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: FormlyNzTextareaModule, declarations: [FormlyFieldTextarea], imports: [CommonModule,
         ReactiveFormsModule,
         FormlyNzFormFieldModule,
-        NzInputModule, i4.FormlyModule] });
+        NzInputModule,
+        NzIconModule, i5.FormlyModule] });
 FormlyNzTextareaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: FormlyNzTextareaModule, imports: [CommonModule,
         ReactiveFormsModule,
         FormlyNzFormFieldModule,
         NzInputModule,
+        NzIconModule,
         FormlyModule.forChild({
             types: [
                 {
@@ -120,6 +176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
                         ReactiveFormsModule,
                         FormlyNzFormFieldModule,
                         NzInputModule,
+                        NzIconModule,
                         FormlyModule.forChild({
                             types: [
                                 {

package/fesm2020/ngx-formly-zorro-antd-textarea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngx-formly-zorro-antd-textarea.mjs","sources":["../../../../packages/formlyantd/textarea/src/textarea.type.ts","../../../../packages/formlyantd/textarea/src/textarea.module.ts","../../../../packages/formlyantd/textarea/src/ngx-formly-zorro-antd-textarea.ts"],"sourcesContent":["import { Component, Type, ChangeDetectionStrategy } from '@angular/core';\nimport { FieldType, FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';\nimport type { FormlyFieldProps } from 'ngx-formly-zorro-antd/form-field';\n\ninterface TextareaProps extends FormlyFieldProps {\n  /**\n   * 自适应内容高度，可设置为 boolean 或对象：{ minRows: 2, maxRows: 6 }\n   * @default false\n   */\n  autosize?: boolean | { minRows: number; maxRows: number };\n\n  /**\n   * 是否隐藏边框\n   * @default false\n   */\n  borderless?: boolean;\n\n  /**\n   * textarea 数字提示显示的最大值\n   */\n  maxCharacterCount?: number;\n}\n\nexport interface FormlyTextareaFieldConfig extends FormlyFieldConfig<TextareaProps> {\n  type: 'textarea' | Type<FormlyFieldTextarea>;\n}\n\n@Component({\n  selector: 'formly-field-textarea',\n  template: `\n    <nz-textarea-count\n      *ngIf=\"props['maxCharacterCount']; else textarea\"\n      [nzMaxCharacterCount]=\"props['maxCharacterCount']\"\n    >\n      <textarea\n        [formControl]=\"formControl\"\n        [formlyAttributes]=\"field\"\n        [ngClass]=\"props['className']\"\n        [rows]=\"props.rows\"\n        [cols]=\"props.cols\"\n        nz-input\n        [nzBorderless]=\"props['borderless']\"\n        [nzAutosize]=\"props['autosize']!\"\n      ></textarea>\n    </nz-textarea-count>\n\n    <ng-template #textarea>\n      <textarea\n        [formControl]=\"formControl\"\n        [formlyAttributes]=\"field\"\n        [ngClass]=\"props['className']\"\n        [rows]=\"props.rows\"\n        [cols]=\"props.cols\"\n        nz-input\n        [nzBorderless]=\"props['borderless']\"\n        [nzAutosize]=\"props['autosize']!\"\n      ></textarea>\n    </ng-template>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class FormlyFieldTextarea extends FieldType<FieldTypeConfig> {\n  override defaultOptions = {\n    props: {\n      rows: 4,\n      autosize: false,\n      borderless: false\n    }\n  };\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FormlyModule } from '@ngx-formly/core';\nimport { FormlyNzFormFieldModule } from 'ngx-formly-zorro-antd/form-field';\n\nimport { FormlyFieldTextarea } from './textarea.type';\nimport { NzInputModule } from 'ng-zorro-antd/input';\n\n@NgModule({\n  declarations: [FormlyFieldTextarea],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    FormlyNzFormFieldModule,\n    NzInputModule,\n\n    FormlyModule.forChild({\n      types: [\n        {\n          name: 'textarea',\n          component: FormlyFieldTextarea,\n          wrappers: ['form-field']\n        }\n      ]\n    })\n  ]\n})\nexport class FormlyNzTextareaModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1"],"mappings":"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"}
+{"version":3,"file":"ngx-formly-zorro-antd-textarea.mjs","sources":["../../../../packages/formlyantd/textarea/src/textarea.type.ts","../../../../packages/formlyantd/textarea/src/textarea.module.ts","../../../../packages/formlyantd/textarea/src/ngx-formly-zorro-antd-textarea.ts"],"sourcesContent":["import { Component, Type, ChangeDetectionStrategy } from '@angular/core';\nimport { FieldType, FieldTypeConfig, FormlyFieldConfig } from '@ngx-formly/core';\nimport type { FormlyFieldProps } from 'ngx-formly-zorro-antd/form-field';\n\ninterface TextareaProps extends FormlyFieldProps {\n  type?: 'count' | 'clear';\n\n  /**\n   * 自适应内容高度，可设置为 boolean 或对象：{ minRows: 2, maxRows: 6 }\n   * @default false\n   */\n  autosize?: boolean | { minRows: number; maxRows: number };\n\n  /**\n   * 是否隐藏边框\n   * @default false\n   */\n  borderless?: boolean;\n\n  /**\n   * textarea 数字提示显示的最大值\n   */\n  maxCharacterCount?: number;\n}\n\nexport interface FormlyTextareaFieldConfig extends FormlyFieldConfig<TextareaProps> {\n  type: 'textarea' | Type<FormlyFieldTextarea>;\n}\n\n@Component({\n  selector: 'formly-field-textarea',\n  template: `\n    <ng-container [ngSwitch]=\"props.type\">\n      <ng-container *ngSwitchCase=\"'count'\">\n        <nz-textarea-count [nzMaxCharacterCount]=\"props['maxCharacterCount'] || 0\">\n          <textarea\n            [formControl]=\"formControl\"\n            [formlyAttributes]=\"field\"\n            [ngClass]=\"props['className']\"\n            [rows]=\"props.rows\"\n            [cols]=\"props.cols\"\n            nz-input\n            [nzBorderless]=\"props['borderless']!!\"\n            [nzAutosize]=\"props['autosize']!!\"\n          ></textarea>\n        </nz-textarea-count>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'clear'\">\n        <nz-input-group\n          class=\"ant-input-affix-wrapper-textarea-with-clear-btn\"\n          [nzSuffix]=\"textAreaClearTpl\"\n        >\n          <ng-container *ngTemplateOutlet=\"textareaTpl\"> </ng-container>\n        </nz-input-group>\n      </ng-container>\n\n      <ng-container *ngSwitchDefault>\n        <ng-container *ngTemplateOutlet=\"textareaTpl\"> </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <ng-template #textareaTpl>\n      <textarea\n        [formControl]=\"formControl\"\n        [formlyAttributes]=\"field\"\n        [ngClass]=\"props['className']\"\n        [rows]=\"props.rows\"\n        [cols]=\"props.cols\"\n        nz-input\n        [nzBorderless]=\"props['borderless']!!\"\n        [nzAutosize]=\"props['autosize']!!\"\n      ></textarea>\n    </ng-template>\n\n    <!-- 清除数据 -->\n    <ng-template #textAreaClearTpl>\n      <span\n        nz-icon\n        class=\"ant-input-clear-icon\"\n        nzTheme=\"fill\"\n        nzType=\"close-circle\"\n        *ngIf=\"formControl.value\"\n        (click)=\"formControl.reset()\"\n      ></span>\n    </ng-template>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class FormlyFieldTextarea extends FieldType<FieldTypeConfig<TextareaProps>> {\n  override defaultOptions = {\n    props: {\n      rows: 4,\n      autosize: false,\n      borderless: false\n    }\n  };\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FormlyModule } from '@ngx-formly/core';\nimport { FormlyNzFormFieldModule } from 'ngx-formly-zorro-antd/form-field';\n\nimport { FormlyFieldTextarea } from './textarea.type';\nimport { NzInputModule } from 'ng-zorro-antd/input';\nimport { NzIconModule } from 'ng-zorro-antd/icon';\n\n@NgModule({\n  declarations: [FormlyFieldTextarea],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    FormlyNzFormFieldModule,\n    NzInputModule,\n    NzIconModule,\n\n    FormlyModule.forChild({\n      types: [\n        {\n          name: 'textarea',\n          component: FormlyFieldTextarea,\n          wrappers: ['form-field']\n        }\n      ]\n    })\n  ]\n})\nexport class FormlyNzTextareaModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1"],"mappings":"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"}

package/fesm2020/ngx-formly-zorro-antd-upload.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, Input, NgModule } from '@angular/core';
+import { forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ViewChild, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@ngx-formly/core';
@@ -17,12 +17,14 @@ import * as i4 from 'ng-zorro-antd/core/transition-patch';
 import * as i5 from 'ng-zorro-antd/core/wave';
 
 /* eslint-disable @typescript-eslint/no-empty-function */
-class UploadComponent extends NzUploadComponent {
+class UploadNzComponent extends NzUploadComponent {
     constructor() {
         super(...arguments);
-        /**
-         * 样式名
-         */
+        /** 上传按钮的图标 */
+        this.nzeUploadButtonIcon = {
+            type: 'cloud-upload'
+        };
+        /** 样式名 */
         this.className = '';
         this.onChange = () => { };
         this.onTouched = () => { };
@@ -52,21 +54,23 @@ class UploadComponent extends NzUploadComponent {
         }
     }
 }
-UploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: UploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: UploadComponent, selector: "formly-upload", inputs: { text: "text", className: "className", resultMap: "resultMap" }, providers: [
+UploadNzComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: UploadNzComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+UploadNzComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: UploadNzComponent, selector: "formly-nz-upload", inputs: { nzeText: "nzeText", nzeHint: "nzeHint", nzeShowUploadButton: "nzeShowUploadButton", nzeUploadButton: "nzeUploadButton", nzeUploadButtonIcon: "nzeUploadButtonIcon", className: "className", resultMap: "resultMap" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
-            useExisting: UploadComponent,
+            useExisting: forwardRef(() => UploadNzComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "transfer", first: true, predicate: ["upload"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    ], usesInheritance: true, ngImport: i0, template: `
     <nz-upload
+      [nzType]="nzType"
       [nzAccept]="nzAccept"
       [nzAction]="nzAction"
       [nzDirectory]="nzDirectory"
       [nzBeforeUpload]="nzBeforeUpload"
       [nzCustomRequest]="nzCustomRequest"
       [nzData]="nzData"
+      [nzDisabled]="nzDisabled"
       [(nzFileList)]="nzFileList"
       [nzLimit]="nzLimit"
       [nzSize]="nzSize"
@@ -90,35 +94,71 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
       [nzFileListRender]="nzFileListRender"
       [ngClass]="className"
       (nzChange)="change($event)"
-      [nzType]="nzType"
       (nzFileListChange)="fileListChange($event)"
     >
-      <ng-container *ngIf="text; else buttontext">
-        <button nz-button type="button">
-          <i nz-icon nzType="upload"></i>
-          {{ text }}
-        </button>
-      </ng-container>
+      <ng-container [ngSwitch]="nzType">
+        <ng-container *ngSwitchCase="'drag'">
+          <p class="ant-upload-drag-icon">
+            <span
+              *ngIf="nzeUploadButtonIcon"
+              nz-icon
+              [nzType]="nzeUploadButtonIcon.type"
+              [nzTheme]="nzeUploadButtonIcon.theme || 'outline'"
+              [nzSpin]="nzeUploadButtonIcon.spin!!"
+              [nzTwotoneColor]="nzeUploadButtonIcon.twoToneColor || ''"
+            ></span>
+          </p>
+          <p class="ant-upload-text">{{ nzeText }}</p>
+          <p class="ant-upload-hint">{{ nzeHint }}</p>
+        </ng-container>
+        <ng-container *ngSwitchDefault>
+          <button
+            type="button"
+            nz-button
+            [disabled]="nzDisabled!!"
+            *ngIf="nzeShowUploadButton !== false"
+          >
+            <span
+              *ngIf="nzeUploadButtonIcon"
+              nz-icon
+              [nzType]="nzeUploadButtonIcon.type"
+              [nzTheme]="nzeUploadButtonIcon.theme || 'outline'"
+              [nzSpin]="nzeUploadButtonIcon.spin!!"
+              [nzTwotoneColor]="nzeUploadButtonIcon.twoToneColor || ''"
+            ></span>
+            {{ nzeText }}
+          </button>
 
-      <ng-template #buttontext>
-        <button nz-button type="button">
-          <i nz-icon nzType="upload"></i>
-        </button>
-      </ng-template>
+          <div *ngIf="nzeShowUploadButton === false">
+            <span
+              *ngIf="nzeUploadButtonIcon"
+              nz-icon
+              [nzType]="nzeUploadButtonIcon.type"
+              [nzTheme]="nzeUploadButtonIcon.theme || 'outline'"
+              [nzSpin]="nzeUploadButtonIcon.spin!!"
+              [nzTwotoneColor]="nzeUploadButtonIcon.twoToneColor || ''"
+            ></span>
+            {{ nzeText }}
+            <div class="ant-upload-hint" style="margin-top: 8px">{{ nzeHint }}</div>
+          </div>
+        </ng-container>
+      </ng-container>
     </nz-upload>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.NzUploadComponent, selector: "nz-upload", inputs: ["nzType", "nzLimit", "nzSize", "nzFileType", "nzAccept", "nzAction", "nzDirectory", "nzOpenFileDialogOnClick", "nzBeforeUpload", "nzCustomRequest", "nzData", "nzFilter", "nzFileList", "nzDisabled", "nzHeaders", "nzListType", "nzMultiple", "nzName", "nzShowUploadList", "nzShowButton", "nzWithCredentials", "nzRemove", "nzPreview", "nzPreviewFile", "nzPreviewIsImage", "nzTransformFile", "nzDownload", "nzIconRender", "nzFileListRender"], outputs: ["nzChange", "nzFileListChange"], exportAs: ["nzUpload"] }, { kind: "component", type: i3.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i4.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i5.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "directive", type: i6.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: UploadComponent, decorators: [{
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.NzUploadComponent, selector: "nz-upload", inputs: ["nzType", "nzLimit", "nzSize", "nzFileType", "nzAccept", "nzAction", "nzDirectory", "nzOpenFileDialogOnClick", "nzBeforeUpload", "nzCustomRequest", "nzData", "nzFilter", "nzFileList", "nzDisabled", "nzHeaders", "nzListType", "nzMultiple", "nzName", "nzShowUploadList", "nzShowButton", "nzWithCredentials", "nzRemove", "nzPreview", "nzPreviewFile", "nzPreviewIsImage", "nzTransformFile", "nzDownload", "nzIconRender", "nzFileListRender"], outputs: ["nzChange", "nzFileListChange"], exportAs: ["nzUpload"] }, { kind: "component", type: i3.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i4.ɵNzTransitionPatchDirective, selector: "[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i5.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "directive", type: i6.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: UploadNzComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'formly-upload',
+                    selector: 'formly-nz-upload',
                     template: `
     <nz-upload
+      [nzType]="nzType"
       [nzAccept]="nzAccept"
       [nzAction]="nzAction"
       [nzDirectory]="nzDirectory"
       [nzBeforeUpload]="nzBeforeUpload"
       [nzCustomRequest]="nzCustomRequest"
       [nzData]="nzData"
+      [nzDisabled]="nzDisabled"
       [(nzFileList)]="nzFileList"
       [nzLimit]="nzLimit"
       [nzSize]="nzSize"
@@ -142,21 +182,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
       [nzFileListRender]="nzFileListRender"
       [ngClass]="className"
       (nzChange)="change($event)"
-      [nzType]="nzType"
       (nzFileListChange)="fileListChange($event)"
     >
-      <ng-container *ngIf="text; else buttontext">
-        <button nz-button type="button">
-          <i nz-icon nzType="upload"></i>
-          {{ text }}
-        </button>
-      </ng-container>
+      <ng-container [ngSwitch]="nzType">
+        <ng-container *ngSwitchCase="'drag'">
+          <p class="ant-upload-drag-icon">
+            <span
+              *ngIf="nzeUploadButtonIcon"
+              nz-icon
+              [nzType]="nzeUploadButtonIcon.type"
+              [nzTheme]="nzeUploadButtonIcon.theme || 'outline'"
+              [nzSpin]="nzeUploadButtonIcon.spin!!"
+              [nzTwotoneColor]="nzeUploadButtonIcon.twoToneColor || ''"
+            ></span>
+          </p>
+          <p class="ant-upload-text">{{ nzeText }}</p>
+          <p class="ant-upload-hint">{{ nzeHint }}</p>
+        </ng-container>
+        <ng-container *ngSwitchDefault>
+          <button
+            type="button"
+            nz-button
+            [disabled]="nzDisabled!!"
+            *ngIf="nzeShowUploadButton !== false"
+          >
+            <span
+              *ngIf="nzeUploadButtonIcon"
+              nz-icon
+              [nzType]="nzeUploadButtonIcon.type"
+              [nzTheme]="nzeUploadButtonIcon.theme || 'outline'"
+              [nzSpin]="nzeUploadButtonIcon.spin!!"
+              [nzTwotoneColor]="nzeUploadButtonIcon.twoToneColor || ''"
+            ></span>
+            {{ nzeText }}
+          </button>
 
-      <ng-template #buttontext>
-        <button nz-button type="button">
-          <i nz-icon nzType="upload"></i>
-        </button>
-      </ng-template>
+          <div *ngIf="nzeShowUploadButton === false">
+            <span
+              *ngIf="nzeUploadButtonIcon"
+              nz-icon
+              [nzType]="nzeUploadButtonIcon.type"
+              [nzTheme]="nzeUploadButtonIcon.theme || 'outline'"
+              [nzSpin]="nzeUploadButtonIcon.spin!!"
+              [nzTwotoneColor]="nzeUploadButtonIcon.twoToneColor || ''"
+            ></span>
+            {{ nzeText }}
+            <div class="ant-upload-hint" style="margin-top: 8px">{{ nzeHint }}</div>
+          </div>
+        </ng-container>
+      </ng-container>
     </nz-upload>
   `,
                     encapsulation: ViewEncapsulation.None,
@@ -164,15 +238,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
                     providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: UploadComponent,
+                            useExisting: forwardRef(() => UploadNzComponent),
                             multi: true
                         }
                     ]
                 }]
-        }], propDecorators: { transfer: [{
-                type: ViewChild,
-                args: ['upload', { static: true }]
-            }], text: [{
+        }], propDecorators: { nzeText: [{
+                type: Input
+            }], nzeHint: [{
+                type: Input
+            }], nzeShowUploadButton: [{
+                type: Input
+            }], nzeUploadButton: [{
+                type: Input
+            }], nzeUploadButtonIcon: [{
                 type: Input
             }], className: [{
                 type: Input
@@ -190,8 +269,10 @@ class FormlyFieldUpload extends FieldType {
                 showUploadList: true,
                 showButton: true,
                 openFileDialogOnClick: true,
+                showUploadButton: true,
                 limit: 0,
                 size: 0,
+                fileList: [],
                 filter: [],
                 text: ''
             }
@@ -205,7 +286,7 @@ class FormlyFieldUpload extends FieldType {
     }
 }
 FormlyFieldUpload.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: FormlyFieldUpload, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FormlyFieldUpload.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: FormlyFieldUpload, selector: "formly-field-upload", viewQueries: [{ propertyName: "upload", first: true, predicate: ["upload"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `<formly-upload
+FormlyFieldUpload.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: FormlyFieldUpload, selector: "formly-field-upload", viewQueries: [{ propertyName: "upload", first: true, predicate: ["upload"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `<formly-nz-upload
     #upload
     [formControl]="formControl"
     [formlyAttributes]="field"
@@ -215,6 +296,7 @@ FormlyFieldUpload.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
     [nzBeforeUpload]="props['beforeUpload']"
     [nzCustomRequest]="props['customRequest']"
     [nzData]="props['data']"
+    [nzDisabled]="props['disabled']!!"
     [(nzFileList)]="props['fileList']"
     [nzLimit]="props['limit']"
     [nzSize]="props['size']"
@@ -223,7 +305,7 @@ FormlyFieldUpload.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
     [nzHeaders]="props['headers']"
     [nzListType]="props['listType']!"
     [nzMultiple]="props['multiple']!!"
-    [nzName]="props['name']!"
+    [nzName]="props['name'] || ''"
     [nzShowUploadList]="props['showUploadList']"
     [nzShowButton]="props['showButton']!!"
     [nzWithCredentials]="props['withCredentials']!!"
@@ -232,22 +314,25 @@ FormlyFieldUpload.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
     [nzPreviewFile]="props['previewFile']"
     [nzPreviewIsImage]="props['previewIsImage']"
     [nzRemove]="props['remove']"
-    (nzChange)="props['change'] && props['change']($event)"
+    (nzChange)="props.change && props.change(field, $event)"
     [nzDownload]="props['download']"
     [nzTransformFile]="props['transformFile']"
     [nzIconRender]="props['iconRender'] ?? null"
     [nzFileListRender]="props['fileListRender'] ?? null"
-    [text]="props['text']"
-    [className]="props['className']"
-    (nzFileListChange)="props['fileListChange'] && props['fileListChange']($event)"
     [resultMap]="props['resultMap']"
+    [nzeHint]="props['hint']"
+    [nzeText]="props['text']"
+    [nzeUploadButtonIcon]="props['uploadButtonIcon']"
+    [nzeShowUploadButton]="props['showUploadButton']"
+    [className]="props['className'] || ''"
+    (nzFileListChange)="props['fileListChange'] && props['fileListChange'](field, $event)"
   >
-  </formly-upload>`, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: UploadComponent, selector: "formly-upload", inputs: ["text", "className", "resultMap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  </formly-nz-upload>`, isInline: true, dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: UploadNzComponent, selector: "formly-nz-upload", inputs: ["nzeText", "nzeHint", "nzeShowUploadButton", "nzeUploadButton", "nzeUploadButtonIcon", "className", "resultMap"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: FormlyFieldUpload, decorators: [{
             type: Component,
             args: [{
                     selector: 'formly-field-upload',
-                    template: `<formly-upload
+                    template: `<formly-nz-upload
     #upload
     [formControl]="formControl"
     [formlyAttributes]="field"
@@ -257,6 +342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
     [nzBeforeUpload]="props['beforeUpload']"
     [nzCustomRequest]="props['customRequest']"
     [nzData]="props['data']"
+    [nzDisabled]="props['disabled']!!"
     [(nzFileList)]="props['fileList']"
     [nzLimit]="props['limit']"
     [nzSize]="props['size']"
@@ -265,7 +351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
     [nzHeaders]="props['headers']"
     [nzListType]="props['listType']!"
     [nzMultiple]="props['multiple']!!"
-    [nzName]="props['name']!"
+    [nzName]="props['name'] || ''"
     [nzShowUploadList]="props['showUploadList']"
     [nzShowButton]="props['showButton']!!"
     [nzWithCredentials]="props['withCredentials']!!"
@@ -274,17 +360,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
     [nzPreviewFile]="props['previewFile']"
     [nzPreviewIsImage]="props['previewIsImage']"
     [nzRemove]="props['remove']"
-    (nzChange)="props['change'] && props['change']($event)"
+    (nzChange)="props.change && props.change(field, $event)"
     [nzDownload]="props['download']"
     [nzTransformFile]="props['transformFile']"
     [nzIconRender]="props['iconRender'] ?? null"
     [nzFileListRender]="props['fileListRender'] ?? null"
-    [text]="props['text']"
-    [className]="props['className']"
-    (nzFileListChange)="props['fileListChange'] && props['fileListChange']($event)"
     [resultMap]="props['resultMap']"
+    [nzeHint]="props['hint']"
+    [nzeText]="props['text']"
+    [nzeUploadButtonIcon]="props['uploadButtonIcon']"
+    [nzeShowUploadButton]="props['showUploadButton']"
+    [className]="props['className'] || ''"
+    (nzFileListChange)="props['fileListChange'] && props['fileListChange'](field, $event)"
   >
-  </formly-upload>`,
+  </formly-nz-upload>`,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], propDecorators: { upload: [{
@@ -295,7 +384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImpor
 class FormlyNzUploadModule {
 }
 FormlyNzUploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: FormlyNzUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FormlyNzUploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: FormlyNzUploadModule, declarations: [FormlyFieldUpload, UploadComponent], imports: [CommonModule,
+FormlyNzUploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: FormlyNzUploadModule, declarations: [FormlyFieldUpload, UploadNzComponent], imports: [CommonModule,
         ReactiveFormsModule,
         FormlyNzFormFieldModule,
         NzUploadModule,
@@ -319,7 +408,7 @@ FormlyNzUploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: FormlyNzUploadModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [FormlyFieldUpload, UploadComponent],
+                    declarations: [FormlyFieldUpload, UploadNzComponent],
                     imports: [
                         CommonModule,
                         ReactiveFormsModule,