feat: added number field

apps/demo/src/app/modules/doc/modules/form/container/value.component.html

@@ -5,6 +5,9 @@
       <p>There are also several helper builders available.</p>
       <doc-form-example-form [dbxFormlyFields]="textFields"></doc-form-example-form>
     </doc-feature-example>
+    <doc-feature-example header="numberField()" hint="Used to configure a number field.">
+      <doc-form-example-form [dbxFormlyFields]="numberFields"></doc-form-example-form>
+    </doc-feature-example>
     <doc-feature-example header="textAreaField()" hint="Used to configure a text area.">
       <doc-form-example-form [dbxFormlyFields]="textAreaField"></doc-form-example-form>
     </doc-feature-example>

apps/demo/src/app/modules/doc/modules/form/container/value.component.ts

@@ -1,14 +1,16 @@
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { Component } from '@angular/core';
-import { addressField, addressListField, cityField, countryField, emailField, phoneField, nameField, phoneAndLabelSectionField, wrappedPhoneAndLabelField, repeatArrayField, stateField, textAreaField, textField, zipCodeField, phoneListField, dateTimeField, DbxDateTimeFieldTimeMode, toggleField, checkboxField } from '@dereekb/dbx-form';
+import { addressField, addressListField, cityField, countryField, emailField, phoneField, nameField, phoneAndLabelSectionField, wrappedPhoneAndLabelField, repeatArrayField, stateField, textAreaField, textField, zipCodeField, phoneListField, dateTimeField, DbxDateTimeFieldTimeMode, toggleField, checkboxField, numberField } from '@dereekb/dbx-form';
 
 @Component({
   templateUrl: './value.component.html'
 })
 export class DocFormValueComponent {
-  readonly textFields: FormlyFieldConfig[] = [textField({ key: 'test', label: 'Text Field', placeholder: 'Placeholder', required: true, minLength: 4, maxLength: 15 }), nameField(), emailField(), cityField(), stateField(), countryField(), zipCodeField()];
+  readonly textFields: FormlyFieldConfig[] = [textField({ key: 'test', label: 'Text Field', description: 'A required text field.', placeholder: 'Placeholder', required: true, minLength: 4, maxLength: 15 }), nameField(), emailField(), cityField(), stateField(), countryField(), zipCodeField()];
 
-  readonly textAreaField: FormlyFieldConfig[] = [textAreaField({ key: 'test', label: 'Text Area Field', placeholder: 'Placeholder', required: true })];
+  readonly numberFields: FormlyFieldConfig[] = [numberField({ key: 'test', label: 'Number Field', description: 'A required number between 0 and 100.', placeholder: 'Placeholder', required: true, min: 0, max: 100 })];
+
+  readonly textAreaField: FormlyFieldConfig[] = [textAreaField({ key: 'test', label: 'Text Area Field', description: 'A required text area field.', placeholder: 'Placeholder', required: true })];
 
   readonly dateTimeFields: FormlyFieldConfig[] = [
     dateTimeField({ key: 'date', required: true, description: 'This is the default date field that requires the user pick a date and time.' }),

packages/dbx-form/src/lib/formly/field/value/hidden.field.ts

@@ -1,4 +1,4 @@
-import { FormlyFieldConfig } from '@ngx-formly/core/lib/core';
+import { FormlyFieldConfig } from '@ngx-formly/core';
 import { LabeledFieldConfig, formlyField } from '../field';
 
 export type HiddenFieldConfig = Pick<LabeledFieldConfig, 'key' | 'required'>;

packages/dbx-form/src/lib/formly/field/value/index.ts

@@ -1,6 +1,7 @@
 export * from './array';
 export * from './boolean';
 export * from './date';
+export * from './number';
 export * from './enum';
 export * from './phone';
 export * from './text';

packages/dbx-form/src/lib/formly/field/value/number/index.ts

@@ -0,0 +1,2 @@
+export * from './number.field';
+export * from './number.field.module';

packages/dbx-form/src/lib/formly/field/value/number/number.field.module.ts

@@ -0,0 +1,10 @@
+import { FormlyMaterialModule } from '@ngx-formly/material';
+import { NgModule } from '@angular/core';
+import { DbxFormFormlyWrapperModule } from '../../wrapper/form.wrapper.module';
+
+@NgModule({
+  imports: [FormlyMaterialModule],
+  declarations: [],
+  exports: [DbxFormFormlyWrapperModule]
+})
+export class DbxFormFormlyNumberFieldModule {}

packages/dbx-form/src/lib/formly/field/value/number/number.field.ts

@@ -0,0 +1,26 @@
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import { AttributesFieldConfig, LabeledFieldConfig, formlyField, propsForFieldConfig, DescriptionFieldConfig } from '../../field';
+
+export interface NumberFieldLengthConfig {
+  min?: number;
+  max?: number;
+}
+
+export type NumberFieldInputType = 'number';
+
+export interface NumberFieldConfig extends LabeledFieldConfig, DescriptionFieldConfig, NumberFieldLengthConfig, AttributesFieldConfig {
+  inputType?: NumberFieldInputType;
+}
+
+export function numberField(config: NumberFieldConfig): FormlyFieldConfig {
+  const { key, min, max, inputType: type = 'number' } = config;
+  return formlyField({
+    key,
+    type: 'input',
+    ...propsForFieldConfig(config, {
+      type,
+      min,
+      max
+    })
+  });
+}

packages/dbx-form/src/lib/formly/field/value/text/text.field.ts

@@ -1,5 +1,5 @@
-import { FormlyFieldConfig } from '@ngx-formly/core/lib/core';
-import { AttributesFieldConfig, LabeledFieldConfig, formlyField, propsForFieldConfig } from '../../field';
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import { AttributesFieldConfig, LabeledFieldConfig, formlyField, propsForFieldConfig, DescriptionFieldConfig } from '../../field';
 
 export interface TextFieldLengthConfig {
   minLength?: number;
@@ -8,7 +8,7 @@ export interface TextFieldLengthConfig {
 
 export type TextFieldInputType = 'text' | 'password' | 'email';
 
-export interface TextFieldConfig extends LabeledFieldConfig, TextFieldLengthConfig, AttributesFieldConfig {
+export interface TextFieldConfig extends LabeledFieldConfig, DescriptionFieldConfig, TextFieldLengthConfig, AttributesFieldConfig {
   inputType?: TextFieldInputType;
   pattern?: string | RegExp;
 }
@@ -27,7 +27,7 @@ export function textField(config: TextFieldConfig): FormlyFieldConfig {
   });
 }
 
-export interface TextAreaFieldConfig extends LabeledFieldConfig, TextFieldLengthConfig, AttributesFieldConfig {
+export interface TextAreaFieldConfig extends LabeledFieldConfig, DescriptionFieldConfig, TextFieldLengthConfig, AttributesFieldConfig {
   rows?: number;
 }
 

packages/dbx-form/src/lib/formly/field/value/value.module.ts

@@ -6,10 +6,11 @@ import { DbxFormFormlyEnumFieldModule } from './enum/enum.field.module';
 import { DbxFormFormlyPhoneFieldModule } from './phone/phone.field.module';
 import { DbxFormFormlyDateFieldModule } from './date/date.field.module';
 import { DbxFormFormlyTextFieldModule } from './text/text.field.module';
+import { DbxFormFormlyNumberFieldModule } from './number/number.field.module';
 
 @NgModule({
   imports: [CommonModule],
   declarations: [],
-  exports: [DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyEnumFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyTextFieldModule]
+  exports: [DbxFormFormlyArrayFieldModule, DbxFormFormlyBooleanFieldModule, DbxFormFormlyDateFieldModule, DbxFormFormlyEnumFieldModule, DbxFormFormlyPhoneFieldModule, DbxFormFormlyNumberFieldModule, DbxFormFormlyTextFieldModule]
 })
 export class DbxFormFormlyValueModule {}

packages/dbx-form/src/lib/formly/formly.directive.ts

@@ -1,6 +1,6 @@
 import { SubscriptionObject, filterMaybe } from '@dereekb/rxjs';
 import { Observable, BehaviorSubject, shareReplay, distinctUntilChanged } from 'rxjs';
-import { FormlyFieldConfig } from '@ngx-formly/core/lib/core';
+import { FormlyFieldConfig } from '@ngx-formly/core';
 import { OnInit, OnDestroy, Directive, Input } from '@angular/core';
 import { DbxFormlyContext } from './formly.context';
 import { Maybe } from '@dereekb/util';

packages/dbx-form/src/lib/formly/template/available.ts

@@ -1,4 +1,4 @@
-import { FormlyFieldConfig } from '@ngx-formly/core/lib/core';
+import { FormlyFieldConfig } from '@ngx-formly/core';
 import { FieldValueIsAvailableValidatorConfig, fieldValueIsAvailableValidator } from '../../validator/available';
 import { textField, TextFieldConfig } from '../field/value/text/text.field';
 import { workingWrapper } from '../field/wrapper/wrapper';