ngx-nz-formly 0.0.3 → 0.0.5

package/README.md

@@ -2,23 +2,34 @@
 
 This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.0.
 
-## Code scaffolding
-
-Run `ng generate component component-name --project NgxNzFormly` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project NgxNzFormly`.
-> Note: Don't forget to add `--project NgxNzFormly` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build NgxNzFormly` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build NgxNzFormly`, go to the dist folder `cd dist/ngx-nz-formly` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test NgxNzFormly` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+## Installation
+
+Angular version `16.x.x`
+```bash
+$ npm install --save ngx-nz-formly
+```
+
+## Quick Start
+
+Adding ``ngx-nz-formly`` to your application is super easy. All you need is to add the following modules to imports in ``app.module.ts``. 
+```
+@NgModule({
+  declarations: [...],
+  imports: [
+    ...,
+    OverlayModule,
+    HttpClientModule,
+    BrowserAnimationsModule,
+    NgxMaskModule.forRoot({}),
+    FormlyModule.forRoot(NzFormlyForRoot),
+  ],
+  providers: [
+    ...,
+    { provide: NZ_I18N, useValue: en_US }
+  ],
+})
+export class AppModule {}
+```
+As an explanation, ``HttpClientModule`` and ``providers`` relates to Ant design setup.
+In order to use special masks on inputs, you need to add ``NgxMaskModule``, too. At last, we have ``OverlayModule``, ``BrowserAnimationsModule`` and ``FormlyModule`` to complete the setup.
+Finally, you need ``NzFormlyForRoot`` config to FormlyModule for root to be able to have your formly with Ant Design.

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "ngx-nz-formly",
-  "version": "0.0.3",
+  "version": "0.0.5",
+  "description": "awesome ngx nz formly",
   "peerDependencies": {
     "@angular/common": "^16.2.0",
     "@angular/core": "^16.2.0",
@@ -11,8 +12,32 @@
     "ngx-mask": "^13.1.3",
     "rxjs": "~7.5.0"
   },
+  "keywords": [
+    "nz",
+    "ng",
+    "ng2",
+    "zorro",
+    "formly",
+    "angular",
+    "nz-formly",
+    "ng2-nz-formly",
+    "ngx-nz-formly",
+    "angular-formly",
+    "ant-design-formly",
+    "ng2formly"
+  ],
+  "author": "sajjadbayat",
   "dependencies": {
     "tslib": "^2.3.0"
   },
+  "typings": "./src/public-api.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./src/public-api.ts"
+    }
+  },
   "sideEffects": false
 }

package/src/lib/components/{formly-button/formly-button.component.ts → nz-formly-button/nz-formly-button.component.ts}

@@ -3,11 +3,11 @@ import { FieldType, FormlyFieldConfig } from "@ngx-formly/core";
 import { NzFormlyButtonProps } from "../../ngx-nz-formly-props.model";
 
 @Component({
-  selector: "app-formly-button",
-  templateUrl: "./formly-button.component.html",
-  styleUrls: ["./formly-button.component.scss"],
+  selector: "app-nz-formly-button",
+  templateUrl: "./nz-formly-button.component.html",
+  styleUrls: ["./nz-formly-button.component.scss"],
 })
-export class FormlyButtonComponent extends FieldType<
+export class NzFormlyButtonComponent extends FieldType<
   FormlyFieldConfig<NzFormlyButtonProps>
 > {
   onClick() {

package/src/lib/components/{formly-field-checkbox/formly-field-checkbox.component.ts → nz-formly-field-checkbox/nz-formly-field-checkbox.component.ts}

@@ -4,11 +4,11 @@ import { NzFormlyCheckboxProps } from "../../ngx-nz-formly-props.model";
 import { Subject, takeUntil, tap } from "rxjs";
 
 @Component({
-  selector: "app-formly-field-checkbox",
-  templateUrl: "./formly-field-checkbox.component.html",
-  styleUrls: ["./formly-field-checkbox.component.scss"],
+  selector: "app-nz-formly-field-checkbox",
+  templateUrl: "./nz-formly-field-checkbox.component.html",
+  styleUrls: ["./nz-formly-field-checkbox.component.scss"],
 })
-export class FormlyFieldCheckboxComponent
+export class NzFormlyFieldCheckboxComponent
   extends FieldType<FieldTypeConfig<NzFormlyCheckboxProps>>
   implements OnInit, OnDestroy
 {

package/src/lib/components/{formly-field-input/formly-field-input.component.ts → nz-formly-field-input/nz-formly-field-input.component.ts}

@@ -11,11 +11,11 @@ const DefaultPhoneMask: CountryCodeMask = {
 };
 
 @Component({
-  selector: "app-formly-field-input",
-  templateUrl: "./formly-field-input.component.html",
-  styleUrls: ["./formly-field-input.component.scss"],
+  selector: "app-nz-formly-field-input",
+  templateUrl: "./nz-formly-field-input.component.html",
+  styleUrls: ["./nz-formly-field-input.component.scss"],
 })
-export class FormlyFieldInputComponent
+export class NzFormlyFieldInputComponent
   extends FieldType<FieldTypeConfig<NzFormlyInputProps>>
   implements AfterViewInit, OnDestroy
 {

package/src/lib/components/{formly-field-radio/formly-field-radio.component.ts → nz-formly-field-radio/nz-formly-field-radio.component.ts}

@@ -4,11 +4,11 @@ import { NzFormlyRadioProps } from "../../ngx-nz-formly-props.model";
 import { Subject, takeUntil, tap } from "rxjs";
 
 @Component({
-  selector: "app-formly-field-radio",
-  templateUrl: "./formly-field-radio.component.html",
-  styleUrls: ["./formly-field-radio.component.scss"],
+  selector: "app-nz-formly-field-radio",
+  templateUrl: "./nz-formly-field-radio.component.html",
+  styleUrls: ["./nz-formly-field-radio.component.scss"],
 })
-export class FormlyFieldRadioComponent
+export class NzFormlyFieldRadioComponent
   extends FieldType<FieldTypeConfig<NzFormlyRadioProps>>
   implements OnInit, OnDestroy
 {

package/src/lib/components/{formly-field-select/formly-field-select.component.ts → nz-formly-field-select/nz-formly-field-select.component.ts}

@@ -4,11 +4,11 @@ import { NzFormlySelectProps } from "../../ngx-nz-formly-props.model";
 import { Subject, takeUntil, tap } from "rxjs";
 
 @Component({
-  selector: "app-formly-field-select",
-  templateUrl: "./formly-field-select.component.html",
-  styleUrls: ["./formly-field-select.component.scss"],
+  selector: "app-nz-formly-field-select",
+  templateUrl: "./nz-formly-field-select.component.html",
+  styleUrls: ["./nz-formly-field-select.component.scss"],
 })
-export class FormlyFieldSelectComponent
+export class NzFormlyFieldSelectComponent
   extends FieldType<FieldTypeConfig<NzFormlySelectProps>>
   implements OnInit, OnDestroy
 {

package/src/lib/components/{formly-field-switch/formly-field-switch.component.ts → nz-formly-field-switch/nz-formly-field-switch.component.ts}

@@ -4,11 +4,11 @@ import { NzFormlySwitchProps } from "../../ngx-nz-formly-props.model";
 import { Subject, takeUntil, tap } from "rxjs";
 
 @Component({
-  selector: "app-formly-field-switch",
-  templateUrl: "./formly-field-switch.component.html",
-  styleUrls: ["./formly-field-switch.component.scss"],
+  selector: "app-nz-formly-field-switch",
+  templateUrl: "./nz-formly-field-switch.component.html",
+  styleUrls: ["./nz-formly-field-switch.component.scss"],
 })
-export class FormlyFieldSwitchComponent
+export class NzFormlyFieldSwitchComponent
   extends FieldType<FieldTypeConfig<NzFormlySwitchProps>>
   implements OnInit, OnDestroy
 {

package/src/lib/ngx-nz-formly-props.model.ts

@@ -77,7 +77,7 @@ export interface NzFormlySwitchProps extends NzFormlyCommonProps {
 }
 
 export interface NzFormlyRadioProps extends NzFormlyCommonProps {
-  nzOptions: nzRadioOptionType[];
+  nzOptions: NzRadioOptionType[];
   nzName?: string;
   nzSize?: NzSizeDSType;
   nzType?: "nz-radio" | "nz-radio-button";
@@ -116,8 +116,8 @@ export interface NzFormlySelectProps extends NzFormlyCommonProps {
   nzLoading?: boolean;
   nzLoadingObs?: Observable<boolean>;
   nzMaxTagCount?: number; // does it really work
-  nzOptions?: nzSelectOptionType[];
-  nzOptionsObs?: Observable<nzSelectOptionType[]>;
+  nzOptions?: NzSelectOptionType[];
+  nzOptionsObs?: Observable<NzSelectOptionType[]>;
   nzMaxTagPlaceholder?: TemplateRef<{ $implicit: any[] }>;
   nzOptionHeightPx?: number;
   nzOptionOverflowSize?: number;
@@ -127,7 +127,7 @@ export interface NzFormlySelectProps extends NzFormlyCommonProps {
   nzOnSearch?: (event: string) => void;
 }
 
-type nzSelectOptionType = {
+type NzSelectOptionType = {
   label: string | number;
   value: NzSafeAny;
   disabled?: boolean;
@@ -135,7 +135,7 @@ type nzSelectOptionType = {
   nzCustomContent?: string | TemplateRef<NzSafeAny>;
 };
 
-type nzRadioOptionType = {
+type NzRadioOptionType = {
   value: NzSafeAny;
   disabled?: boolean;
 } & (

package/src/lib/ngx-nz-formly-validators.ts

@@ -2,7 +2,7 @@ import { AbstractControl } from "@angular/forms";
 import { FormlyFieldConfig } from "@ngx-formly/core";
 import { NzFormlyInputProps } from "./ngx-nz-formly-props.model";
 
-export type validatorNames = {
+export type NzFormlyValidatorNames = {
   [key in
     | "required"
     | "minLen"
@@ -16,7 +16,7 @@ export type validatorNames = {
 export function minLengthValidator(
   control: AbstractControl,
   field: FormlyFieldConfig<NzFormlyInputProps>,
-): validatorNames | null {
+): NzFormlyValidatorNames | null {
   if (field.props?.minLen)
     return control.value?.length < field.props?.minLen
       ? { minLen: true }
@@ -31,7 +31,7 @@ export function minLengthMessage(field: FormlyFieldConfig<NzFormlyInputProps>) {
 export function maxLengthValidator(
   control: AbstractControl,
   field: FormlyFieldConfig<NzFormlyInputProps>,
-): validatorNames | null {
+): NzFormlyValidatorNames | null {
   if (field.props?.maxLen)
     return control.value?.length > field.props?.maxLen
       ? { maxLen: true }
@@ -46,7 +46,7 @@ export function maxLengthMessage(field: FormlyFieldConfig<NzFormlyInputProps>) {
 export function minValueValidator(
   control: AbstractControl,
   field: FormlyFieldConfig<NzFormlyInputProps>,
-): validatorNames | null {
+): NzFormlyValidatorNames | null {
   if (field.props?.minValue && control.value != null)
     return Number(control.value) < field.props.minValue
       ? { minValue: false }
@@ -61,7 +61,7 @@ export function minValueMessage(field: FormlyFieldConfig<NzFormlyInputProps>) {
 export function maxValueValidator(
   control: AbstractControl,
   field: FormlyFieldConfig<NzFormlyInputProps>,
-): validatorNames | null {
+): NzFormlyValidatorNames | null {
   if (field.props?.maxValue && control.value != null)
     return Number(control.value) > field.props.maxValue
       ? { maxValue: true }
@@ -75,7 +75,7 @@ export function maxValueMessage(field: FormlyFieldConfig<NzFormlyInputProps>) {
 
 export function emailValidator(
   control: AbstractControl,
-): validatorNames | null {
+): NzFormlyValidatorNames | null {
   let REGEX = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/;
   return REGEX.test(control.value) ? null : { email: true };
 }
@@ -83,7 +83,7 @@ export function emailValidator(
 export function passwordValidator(
   control: AbstractControl,
   field: FormlyFieldConfig<NzFormlyInputProps>,
-): validatorNames | null {
+): NzFormlyValidatorNames | null {
   if (field.props?.type === "password") {
     let REGEX = /^(?=.*[A-Z])(?=.*\d)(?=.*[\W_])[A-Za-z\d\W_]{8,}$/;
     return REGEX.test(control.value) ? null : { password: true };

package/src/lib/ngx-nz-formly.module.ts

@@ -1,12 +1,12 @@
 import { NgModule } from "@angular/core";
-import { FormlyFieldInputComponent } from "./components/formly-field-input/formly-field-input.component";
-import { FormlyFieldCheckboxComponent } from "./components/formly-field-checkbox/formly-field-checkbox.component";
-import { FormlyButtonComponent } from "./components/formly-button/formly-button.component";
-import { FormlyFieldSelectComponent } from "./components/formly-field-select/formly-field-select.component";
-import { FormlyFieldSwitchComponent } from "./components/formly-field-switch/formly-field-switch.component";
-import { FormlyFieldRadioComponent } from "./components/formly-field-radio/formly-field-radio.component";
-import { FormlyLabelWrapperComponent } from "./wrappers/formly-label-wrapper/formly-label-wrapper.component";
-import { FormlyDefaultWrapperComponent } from "./wrappers/formly-default-wrapper/formly-default-wrapper.component";
+import { NzFormlyFieldInputComponent } from "./components/nz-formly-field-input/nz-formly-field-input.component";
+import { NzFormlyFieldCheckboxComponent } from "./components/nz-formly-field-checkbox/nz-formly-field-checkbox.component";
+import { NzFormlyButtonComponent } from "./components/nz-formly-button/nz-formly-button.component";
+import { NzFormlyFieldSelectComponent } from "./components/nz-formly-field-select/nz-formly-field-select.component";
+import { NzFormlyFieldSwitchComponent } from "./components/nz-formly-field-switch/nz-formly-field-switch.component";
+import { NzFormlyFieldRadioComponent } from "./components/nz-formly-field-radio/nz-formly-field-radio.component";
+import { NzFormlyLabelWrapperComponent } from "./wrappers/nz-formly-label-wrapper/nz-formly-label-wrapper.component";
+import { NzFormlyDefaultWrapperComponent } from "./wrappers/nz-formly-default-wrapper/nz-formly-default-wrapper.component";
 import {
   ConfigOption,
   FormlyFieldConfig,
@@ -52,7 +52,7 @@ export const NzFormlyForRoot: ConfigOption = {
   types: [
     {
       name: "input",
-      component: FormlyFieldInputComponent,
+      component: NzFormlyFieldInputComponent,
       wrappers: ["default-wrapper", "label-wrapper"],
       defaultOptions: <FormlyFieldConfig<NzFormlyInputProps>>{
         props: {
@@ -65,7 +65,7 @@ export const NzFormlyForRoot: ConfigOption = {
     },
     {
       name: "checkbox",
-      component: FormlyFieldCheckboxComponent,
+      component: NzFormlyFieldCheckboxComponent,
       wrappers: [],
       defaultOptions: <FormlyFieldConfig<NzFormlyCheckboxProps>>{
         props: {
@@ -76,7 +76,7 @@ export const NzFormlyForRoot: ConfigOption = {
     },
     {
       name: "switch",
-      component: FormlyFieldSwitchComponent,
+      component: NzFormlyFieldSwitchComponent,
       wrappers: ["default-wrapper", "label-wrapper"],
       defaultOptions: <FormlyFieldConfig<NzFormlySwitchProps>>{
         props: {
@@ -89,7 +89,7 @@ export const NzFormlyForRoot: ConfigOption = {
     },
     {
       name: "radio",
-      component: FormlyFieldRadioComponent,
+      component: NzFormlyFieldRadioComponent,
       wrappers: ["default-wrapper", "label-wrapper"],
       defaultOptions: <FormlyFieldConfig<NzFormlyRadioProps>>{
         props: {
@@ -102,7 +102,7 @@ export const NzFormlyForRoot: ConfigOption = {
     },
     {
       name: "select",
-      component: FormlyFieldSelectComponent,
+      component: NzFormlyFieldSelectComponent,
       wrappers: ["default-wrapper", "label-wrapper"],
       defaultOptions: <FormlyFieldConfig<NzFormlySelectProps>>{
         props: {
@@ -132,7 +132,7 @@ export const NzFormlyForRoot: ConfigOption = {
     },
     {
       name: "button",
-      component: FormlyButtonComponent,
+      component: NzFormlyButtonComponent,
       wrappers: ["default-wrapper"],
       defaultOptions: <FormlyFieldConfig<NzFormlyButtonProps>>{
         props: {
@@ -151,11 +151,11 @@ export const NzFormlyForRoot: ConfigOption = {
   wrappers: [
     {
       name: "default-wrapper",
-      component: FormlyDefaultWrapperComponent,
+      component: NzFormlyDefaultWrapperComponent,
     },
     {
       name: "label-wrapper",
-      component: FormlyLabelWrapperComponent,
+      component: NzFormlyLabelWrapperComponent,
     },
   ],
   validators: [
@@ -232,14 +232,14 @@ export const NzFormlyForRoot: ConfigOption = {
 
 @NgModule({
   declarations: [
-    FormlyFieldInputComponent,
-    FormlyFieldCheckboxComponent,
-    FormlyFieldSwitchComponent,
-    FormlyFieldSelectComponent,
-    FormlyButtonComponent,
-    FormlyFieldRadioComponent,
-    FormlyLabelWrapperComponent,
-    FormlyDefaultWrapperComponent
+    NzFormlyFieldInputComponent,
+    NzFormlyFieldCheckboxComponent,
+    NzFormlyFieldSwitchComponent,
+    NzFormlyFieldSelectComponent,
+    NzFormlyButtonComponent,
+    NzFormlyFieldRadioComponent,
+    NzFormlyLabelWrapperComponent,
+    NzFormlyDefaultWrapperComponent
   ],
   imports: [
     CommonModule,

package/src/lib/wrappers/{formly-default-wrapper/formly-default-wrapper.component.ts → nz-formly-default-wrapper/nz-formly-default-wrapper.component.ts}

@@ -4,9 +4,9 @@ import { animate, style, transition, trigger } from "@angular/animations";
 import { NzFormlyCommonProps } from "../../ngx-nz-formly-props.model";
 
 @Component({
-  selector: "app-formly-default-wrapper",
-  templateUrl: "./formly-default-wrapper.component.html",
-  styleUrls: ["./formly-default-wrapper.component.scss"],
+  selector: "app-nz-formly-default-wrapper",
+  templateUrl: "./nz-formly-default-wrapper.component.html",
+  styleUrls: ["./nz-formly-default-wrapper.component.scss"],
   animations: [
     trigger("myAnimation", [
       transition(":enter", [
@@ -20,6 +20,6 @@ import { NzFormlyCommonProps } from "../../ngx-nz-formly-props.model";
     ]),
   ],
 })
-export class FormlyDefaultWrapperComponent extends FieldWrapper<
+export class NzFormlyDefaultWrapperComponent extends FieldWrapper<
   FieldTypeConfig<NzFormlyCommonProps>
 > {}

package/src/lib/wrappers/{formly-label-wrapper/formly-label-wrapper.component.ts → nz-formly-label-wrapper/nz-formly-label-wrapper.component.ts}

@@ -3,10 +3,10 @@ import { FieldTypeConfig, FieldWrapper } from "@ngx-formly/core";
 import { NzFormlyCommonProps } from "../../ngx-nz-formly-props.model";
 
 @Component({
-  selector: "app-formly-label-wrapper",
-  templateUrl: "./formly-label-wrapper.component.html",
-  styleUrls: ["./formly-label-wrapper.component.scss"],
+  selector: "app-nz-formly-label-wrapper",
+  templateUrl: "./nz-formly-label-wrapper.component.html",
+  styleUrls: ["./nz-formly-label-wrapper.component.scss"],
 })
-export class FormlyLabelWrapperComponent extends FieldWrapper<
+export class NzFormlyLabelWrapperComponent extends FieldWrapper<
   FieldTypeConfig<NzFormlyCommonProps>
 > {}