WML Form
The Angular WML Form Libary is a versatile and customizable library designed to streamline form creation and management in Angular applications. This component offers the following features:
- Dynamic Field Management: Easily manage and update fields dynamically using the
updateFieldsandupdateFieldsWrappermethods. - Flexible Layouts: Define field sections to organize and layout fields in a structured manner.
- Responsive Design: Ensures forms look great on various screen sizes with built-in media queries.
- Custom Styling: Supports custom styles including glassmorphism effects for a modern UI.
- Input Handling: Handles various types of inputs including standalone fields and WML cards.
- Event Handling: Emits events when fields are updated, allowing for reactive and interactive forms.
Installation
Section titled InstallationTerminal window
npm install --verbose @windmillcode/angular-wml-form# to populate the field, submit formnpm install --verbose @windmillcode/angular-wml-fieldnpm install --verbose @windmillcode/angular-wml-inputnpm install --verbose @windmillcode/angular-wml-buttonUsage
Section titled UsageWMLFormZero
Section titled WMLFormZeroBasic Form Setup
Section titled Basic Form Setup- the FormGroup is applied at the field level not the form level so essentiallly you do not need wml-form-zero to create your custom form
- to see how this complex form works if you type in abc in the name field then the email field is required however if the name field is not abc then you can empty the email field and submit the form. WMLForm is very impervious
- it replaces so you need the orginal field in case of adding fields
Field Sections
Section titled Field Sections- using field sections helps style the layout of the form
- All you have to do is to apply display flex to the target form
Reference
Section titled ReferenceWMLFormZeroComponent Properties
Section titled WMLFormZeroComponent Properties| Property | Type | Description |
|---|---|---|
props | WMLFormZeroProps | The main properties object for configuring the form. |
WMLFormZeroProps Properties
Section titled WMLFormZeroProps Properties| Property | Type | Description |
|---|---|---|
view | WMLView | View configuration for the form. |
fields | Array<WMLFieldZeroProps> | List of fields in the form. |
fieldSections | Array<number> | Array defining the layout sections of the fields. |
fieldsUpdatedEvent | Subject<void> | Event emitted when fields are updated. |
resetFieldSections | () => void | Method to reset field sections. |
updateFields | (fields: Array<WMLFieldZeroProps>) => void | Method to update fields. |
This structured and organized documentation provides a clear and comprehensive guide for developers to understand and use the WMLFormZero component effectively.
Changelog
Section titled Changelogv18.1.4 [7/13/24]
Section titled v18.1.4 [7/13/24]- updated package to reflect the version ^18.1.0 of @angular/core package,
v18.1.6 [7/14/24]
Section titled v18.1.6 [7/14/24]- updated package to conform with @windmillcode/angular-wml-components-base ,
v18.1.1000 [7/18/24]
Section titled v18.1.1000 [7/18/24]- updated package to reflect the version ^18.1.1 of @angular/core package,
v18.1.2000 [7/24/24]
Section titled v18.1.2000 [7/24/24]- updated package to reflect the version ^18.1.2 of @angular/core package,
v18.1.2300 [7/27/24]
Section titled v18.1.2300 [7/27/24]- updated package to conform with @windmillcode/angular-wml-components-base ,
v18.1.2301 [7/30/24]
Section titled v18.1.2301 [7/30/24]- updated package to conform with @windmillcode/angular-wml-components-base ,
v18.1.3000-beta1 [8/1/24]
Section titled v18.1.3000-beta1 [8/1/24]- updated package to conform with @windmillcode/angular-wml-components-base ,
v18.1.3000-beta2 [8/1/24]
Section titled v18.1.3000-beta2 [8/1/24]- updated package to conform with @windmillcode/angular-wml-components-base ,
v18.1.3000-beta3 [8/1/24]
Section titled v18.1.3000-beta3 [8/1/24]- updated package to conform with @windmillcode/angular-wml-components-base ,
v18.1.3000-beta4 [8/1/24]
Section titled v18.1.3000-beta4 [8/1/24]- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3001 [8/4/24]
Section titled v18.1.3001 [8/4/24]- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3002 [8/4/24]
Section titled v18.1.3002 [8/4/24]- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3002 [8/5/24]
Section titled v18.1.3002 [8/5/24]- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3003 [8/5/24]
Section titled v18.1.3003 [8/5/24]- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3004 [8/5/24]
Section titled v18.1.3004 [8/5/24]- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3005 [8/5/24]
Section titled v18.1.3005 [8/5/24]- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3006 [8/5/24]
Section titled v18.1.3006 [8/5/24]- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.3007 [8/5/24]
Section titled v18.1.3007 [8/5/24]- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.4000 [8/14/24]
Section titled v18.1.4000 [8/14/24]- updated package to conform with @windmillcode/angular-wml-components-base
v18.1.4001 [8/14/24]
Section titled v18.1.4001 [8/14/24]- updated package to conform with @windmillcode/angular-wml-components-base
v18.2.0 [8/15/24]
Section titled v18.2.0 [8/15/24]- updated package to conform with @windmillcode/angular-wml-components-base
v18.2.1 [8/20/24]
Section titled v18.2.1 [8/20/24]- updated package to conform with @windmillcode/angular-wml-components-base
v18.2.1000 [8/22/24]
Section titled v18.2.1000 [8/22/24]- updated package to reflect the version 18.2.1 of @angular/core package
v18.2.2000 [8/30/24]
Section titled v18.2.2000 [8/30/24]- updated package to reflect the version 18.2.2 of @angular/core package
v18.2.2100 [9/1/24]
Section titled v18.2.2100 [9/1/24]- updated package to conform with @windmillcode/angular-wml-components-base
v18.2.2101 [9/1/24]
Section titled v18.2.2101 [9/1/24]- updated package to conform with @windmillcode/angular-wml-components-base
v18.2.2200 [9/3/24]
Section titled v18.2.2200 [9/3/24]- updated package to conform with @windmillcode/angular-wml-components-base
v18.2.3000 [9/4/24]
Section titled v18.2.3000 [9/4/24]- updated package to reflect the version 18.2.3 of @angular/core package
v18.2.3100 [9/8/24]
Section titled v18.2.3100 [9/8/24]- updated package to reflect the version 18.2.3 of @angular/core package
v18.2.3110 [9/10/24]
Section titled v18.2.3110 [9/10/24]- updated package to conform with @windmillcode/angular-wml-components-base
v18.2.3112 [9/10/24]
Section titled v18.2.3112 [9/10/24]- updated package to conform with @windmillcode/angular-wml-components-base
v18.2.4000 [9/16/24]
Section titled v18.2.4000 [9/16/24]- updated package to reflect the version 18.2.4 of @angular/core package
v18.2.4100 [9/19/24]
Section titled v18.2.4100 [9/19/24]- updated package to conform with @windmillcode/wml-components-base
v18.2.4200 [9/21/24]
Section titled v18.2.4200 [9/21/24]- updated package to conform with @windmillcode/wml-components-base
v18.2.5001 [9/22/24]
Section titled v18.2.5001 [9/22/24]- updated package to reflect the version 18.2.5 of @angular/core package
v18.2.6000 [10/1/24]
Section titled v18.2.6000 [10/1/24]- updated package to reflect the version 18.2.6 of @angular/core package
v18.2.7000 [10/2/24]
Section titled v18.2.7000 [10/2/24]- updated package to reflect the version 18.2.7 of @angular/core package
v18.2.7001 [10/5/24]
Section titled v18.2.7001 [10/5/24]- updated package to conform with @windmillcode/wml-components-base
v18.2.7010 [10/9/24]
Section titled v18.2.7010 [10/9/24]- updated package to conform with @windmillcode/wml-components-base
v18.2.7020 [10/10/24]
Section titled v18.2.7020 [10/10/24]- updated package to conform with @windmillcode/wml-components-base
v18.2.8000 [10/10/24]
Section titled v18.2.8000 [10/10/24]- updated package to reflect the version 18.2.8 of @angular/core package
v18.2.8000 [10/11/24]
Section titled v18.2.8000 [10/11/24]- updated package to reflect the version 18.2.8 of @angular/core package
v18.2.8001 [10/11/24]
Section titled v18.2.8001 [10/11/24]- updated package to conform with @windmillcode/wml-components-base
v18.2.9000 [10/23/24]
Section titled v18.2.9000 [10/23/24]- updated package to conform with @windmillcode/wml-components-base
v18.2.10000 [10/31/24]
Section titled v18.2.10000 [10/31/24]- updated package to conform with @windmillcode/wml-components-base
v18.2.11000 [11/7/24]
Section titled v18.2.11000 [11/7/24]- updated package to conform with @windmillcode/wml-components-base
v18.2.12000 [11/15/24]
Section titled v18.2.12000 [11/15/24]- updated package to conform with @windmillcode/wml-components-base
v18.2.12001 [11/17/24]
Section titled v18.2.12001 [11/17/24]- updated package to conform with @windmillcode/wml-components-base
v19.0.0 [11/19/24]
Section titled v19.0.0 [11/19/24]- updated package to conform with @windmillcode/wml-components-base
v19.0.3 [11/20/24]
Section titled v19.0.3 [11/20/24]- updated package to conform with @windmillcode/wml-components-base
v19.0.4 [11/26/24]
Section titled v19.0.4 [11/26/24]- updated package to conform with @windmillcode/wml-components-base
v19.0.1000 [11/26/24]
Section titled v19.0.1000 [11/26/24]- updated package to conform with @windmillcode/wml-components-base
v19.0.2000 [12/4/24]
Section titled v19.0.2000 [12/4/24]- updated package to reflect the version 19.0.2 of @angular/core package
v19.0.3000 [12/6/24]
Section titled v19.0.3000 [12/6/24]- updated package to reflect the version 19.0.3 of @angular/core package
v19.0.4000 [12/12/24]
Section titled v19.0.4000 [12/12/24]- updated package to reflect the version 19.0.4 of @angular/core package
v19.0.5000 [12/19/24]
Section titled v19.0.5000 [12/19/24]- updated package to reflect the version 19.0.5 of @angular/core package
v19.0.5100 [12/29/24]
Section titled v19.0.5100 [12/29/24]- updated package to conform with @windmillcode/wml-components-base
v19.0.5101 [1/4/25]
Section titled v19.0.5101 [1/4/25]- field.parentContainer.class field.parentContainer.style where added to make it easier for custom styling of the form
v19.0.6000 [1/12/25]
Section titled v19.0.6000 [1/12/25]- updated package to reflect the version 19.0.6 of @angular/core package
v19.0.7000 [1/16/25]
Section titled v19.0.7000 [1/16/25]- updated package to reflect the version 19.0.7 of @angular/core package
v19.1.0 [1/17/25]
Section titled v19.1.0 [1/17/25]- updated package to reflect the version 19.1.0 of @angular/core package
v19.1.1000 [1/17/25]
Section titled v19.1.1000 [1/17/25]- updated package to reflect the version 19.1.1 of @angular/core package
v19.1.2000 [1/23/25]
Section titled v19.1.2000 [1/23/25]- updated package to reflect the version 19.1.2 of @angular/core package
v19.1.3000 [1/23/25]
Section titled v19.1.3000 [1/23/25]- updated package to reflect the version 19.1.3 of @angular/core package
v19.1.3100 [1/23/25]
Section titled v19.1.3100 [1/23/25]- update package to support the react native ecosystem
v19.1.3111 [1/27/25]
Section titled v19.1.3111 [1/27/25]- updated package to conform with @windmillcode/wml-components-base
v19.1.3112 [1/28/25]
Section titled v19.1.3112 [1/28/25]- updated package to conform with @windmillcode/wml-components-base
v19.1.4000 [1/31/25]
Section titled v19.1.4000 [1/31/25]- updated package to reflect the version 19.1.4 of @angular/core package
v19.1.5000 [2/8/25]
Section titled v19.1.5000 [2/8/25]- updated package to reflect the version 19.1.5 of @angular/core package
v19.1.6000 [2/13/25]
Section titled v19.1.6000 [2/13/25]- updated package to reflect the version 19.1.6 of @angular/core package
v19.1.7000 [2/21/25]
Section titled v19.1.7000 [2/21/25]- updated package to reflect the version 19.1.7 of @angular/core package
v19.1.8000 [3/4/25]
Section titled v19.1.8000 [3/4/25]- updated package to reflect the version 19.1.8 of @angular/core package
v19.2.0 [3/4/25]
Section titled v19.2.0 [3/4/25]- updated package to reflect the version 19.2.0 of @angular/core package
v19.2.1000 [3/9/25]
Section titled v19.2.1000 [3/9/25]- updated package to reflect the version 19.2.1 of @angular/core package
v19.2.2000 [3/15/25]
Section titled v19.2.2000 [3/15/25]- updated package to reflect the version 19.2.2 of @angular/core package
v19.2.3000 [3/21/25]
Section titled v19.2.3000 [3/21/25]- updated package to reflect the version 19.2.3 of @angular/core package
v19.2.4000 [3/27/25]
Section titled v19.2.4000 [3/27/25]- updated package to reflect the version 19.2.4 of @angular/core package
v19.2.5000 [4/3/25]
Section titled v19.2.5000 [4/3/25]- updated package to reflect the version 19.2.5 of @angular/core package
v19.2.5001 [4/6/25]
Section titled v19.2.5001 [4/6/25]- updated package to conform with @windmillcode/wml-components-base
v19.2.5100 [4/10/25]
Section titled v19.2.5100 [4/10/25]- updated package to conform with @windmillcode/wml-components-base
v19.2.6000 [4/10/25]
Section titled v19.2.6000 [4/10/25]- updated package to conform with @windmillcode/wml-components-base
v19.2.7000 [4/21/25]
Section titled v19.2.7000 [4/21/25]- updated package to conform with @windmillcode/wml-components-base
v19.2.8000 [4/24/25]
Section titled v19.2.8000 [4/24/25]- updated package to reflect the version 19.2.8 of @angular/core package
v19.2.9000 [5/1/25]
Section titled v19.2.9000 [5/1/25]- updated package to reflect the version 19.2.9 of @angular/core package
v19.2.10000 [5/8/25]
Section titled v19.2.10000 [5/8/25]- updated package to reflect the version 19.2.10 of @angular/core package
v19.2.11000 [5/15/25]
Section titled v19.2.11000 [5/15/25]- updated package to reflect the version 19.2.11 of @angular/core package
v19.2.12000 [5/22/25]
Section titled v19.2.12000 [5/22/25]- updated package to reflect the version 19.2.12 of @angular/core package
v19.2.13000 [5/24/25]
Section titled v19.2.13000 [5/24/25]- updated package to reflect the version 19.2.13 of @angular/core package
v19.2.14000 [5/28/25]
Section titled v19.2.14000 [5/28/25]- updated package to reflect the version 19.2.14 of @angular/core package
v19.2.14001 [6/11/25]
Section titled v19.2.14001 [6/11/25]- updated package to conform with @windmillcode/wml-components-base
v20.0.0 [6/29/25]
Section titled v20.0.0 [6/29/25]- updated package to conform with @windmillcode/wml-components-base
v20.0.1000 [6/30/25]
Section titled v20.0.1000 [6/30/25]- updated package to conform with @windmillcode/wml-components-base
v20.0.2000 [6/30/25]
Section titled v20.0.2000 [6/30/25]- updated package to conform with @windmillcode/wml-components-base
v20.0.3000 [7/2/25]
Section titled v20.0.3000 [7/2/25]- updated package to conform with @windmillcode/wml-components-base
v20.0.4000 [7/2/25]
Section titled v20.0.4000 [7/2/25]- updated package to conform with @windmillcode/wml-components-base
v20.0.5000 [7/2/25]
Section titled v20.0.5000 [7/2/25]- updated package to conform with @windmillcode/wml-components-base
v20.0.6000 [7/27/25]
Section titled v20.0.6000 [7/27/25]- updated package to conform with @windmillcode/wml-components-base
v20.1.0 [7/27/25]
Section titled v20.1.0 [7/27/25]- updated package to conform with @windmillcode/wml-components-base
v20.1.1000 [7/27/25]
Section titled v20.1.1000 [7/27/25]- updated package to conform with @windmillcode/wml-components-base
v20.1.2000 [7/28/25]
Section titled v20.1.2000 [7/28/25]- updated package to conform with @windmillcode/wml-components-base
v20.1.3000 [7/28/25]
Section titled v20.1.3000 [7/28/25]- updated package to conform with @windmillcode/wml-components-base
v20.1.4000 [8/1/25]
Section titled v20.1.4000 [8/1/25]- updated package to conform with @windmillcode/wml-components-base
v20.1.5000 [8/9/25]
Section titled v20.1.5000 [8/9/25]- updated package to conform with @windmillcode/wml-components-base
v20.1.6000 [8/14/25]
Section titled v20.1.6000 [8/14/25]- updated package to conform with @windmillcode/wml-components-base