Name	Name	Last commit message	Last commit date
parent directory ..
src	src
LICENSE	LICENSE
README.md	README.md
_color_pallete.scss	_color_pallete.scss
_common.scss	_common.scss
_media_queries.scss	_media_queries.scss
_spacing.scss	_spacing.scss
ng-package.json	ng-package.json
package.json	package.json
styles.scss	styles.scss
tsconfig.lib.json	tsconfig.lib.json
tsconfig.lib.prod.json	tsconfig.lib.prod.json
tsconfig.spec.json	tsconfig.spec.json

WML Field

This content is for the 19.0.0 version. Switch to thelatest versionfor up-to-date documentation.

The Angular WML Field library is an Angular-based framework designed to enhance the functionality and management of form fields within web applications. It provides a robust set of components and services that simplify the creation, validation, and handling of form fields, addressing common challenges faced by developers in form management. The library integrates seamlessly with Angular’s reactive forms module, offering additional utilities for field state management, validation messaging, and dynamic content loading, thereby streamlining the form development process and improving user interaction.

At the core of the angular-wml-field library are several central components, including WMLFieldZero and WMLLabelZero , each serving a distinct purpose within the form management ecosystem. WMLFieldZero acts as a container for individual form fields, encapsulating the logic for field rendering, validation, and interaction. It allows for the integration of custom components, enhancing flexibility and extensibility. WMLLabelZero , on the other hand, is dedicated to managing field labels and validation messages, supporting dynamic content capabilities. These components are designed to work in unison, with WMLFieldZero typically serving as a parent container that orchestrates the behavior of nested label and input components. Developers can customize these components through various input parameters and methods, enabling the creation of tailored form experiences that cater to specific application needs.

Installation

Terminal window

npm install -s --verbose @windmillcode/angular-wml-field

# needed to practically work with the field

npm install -s --verbose @windmillcode/angular-wml-input

Usage

WMLFieldZero

Getting Started

For advanced customization you can have as many labels and errors<iframe src="https://stackblitz.com/edit/stackblitz-starters-hs4nsx?ctl=1&embed=1&file=src%2Fmain.ts&theme=dark" style="width: 100%; height: calc(500/16 * 1em) !important;"></iframe>

Error Messages

Editing Field Features

Advanced Setup

Reference

WMLFieldZeroProps Properties

Property	Type	Description
`self.type`	`"standalone" \| "wml-card"`	Determines the type of field, either standalone or wrapped in a card.
`label.type`	`"custom"`	Specifies the type of label component; currently, only custom labels are supported.
`field.type`	`"input" \| "custom"`	Indicates the type of field, either a standard input or a custom field component.
`field.parentForm`	`FormGroup`	The parent `FormGroup` instance to which this field belongs.
`field.formControlName`	`string`	The name of the form control within the parent form group.
`error.type`	`"custom"`	Specifies the type of error display; currently, only custom error components are supported.

WMLFieldZeroProps Methods

Method	Signature	Description
`getReactiveFormControl`	`() => AbstractControl`	Retrieves the `AbstractControl` associated with this field.
`getParentForm`	`() => FormGroup`	Returns the parent `FormGroup` of this field.
`getFormControlName`	`() => string`	Gets the name of the form control associated with this field.
`getLabel`	`() => string`	Retrieves the label’s text value.
`getRequiredLabel`	`() => string`	Fetches the required label’s text value if it exists.
`updateLabel`	`(label: string) => void`	Updates the label’s text value.
`updateRequiredLabel`	`(label: string) => void`	Updates the required label’s text value.
`deleteLabel`	`() => void`	Removes the label text.
`deleteRequiredLabelPart`	`() => void`	Removes the required label text.

WMLLabelZeroProps Class Properties

Property	Type	Description
`cdref`	`ChangeDetectorRef?`	Optional reference to Angular’s change detection mechanism.
`type`	`'label' \| 'error'`	Determines the label type, either for standard labels or error messages.
`isPresent`	`boolean`	Flag indicating if the label should be displayed.
`errorMsgs`	`Object`	An object containing error message mappings.
`labels`	`Array<Array<{ type?: 'default' \| 'error' \| 'required' \| 'errorLink' \| 'defaultLink', value: string, isPresent?: boolean }>>`	Defines the label parts and their properties.
`wmlField`	`WMLFieldZeroProps`	Reference to the associated `WMLField` instance.

WMLLabelZeroProps Class Methods

Method	Signature	Description
`toggleErrors`	`(formControl: AbstractControl) => string[]`	Determines which error messages to display based on the form control’s state. Used interally probably triggerable plans to make it fully triggerable so if the errorMsgs are updated you can manually update the erros in the view

Changelog

v0.0.6

added updateLabel and updateRequiredLabel wrappers for updateLabelPart which allow to update the input of a field

v1.0.0

ensured that there is support for ngx-translate and non ngx-translate featuresto enable translation

export function HttpLoaderFactory(http: HttpClient) {

return new TranslateHttpLoader(http);

}

HttpClientModule,

WMLFieldModule

.forChild(

new WMLModuleForRootProps({

ngxTranslateLoaderFactory:HttpLoaderFactory

})

),

to disable translation

WMLFieldModule

v2.0.0

MAJOR rename to angular-wml-fieldfixed major problems concerning ngx-translate

// translate

// first make sure to have ONLY ONE in the imports for AppModule

TranslateModule.forRoot({

defaultLanguage: 'en',

loader: {

provide: TranslateLoader,

useFactory: HttpLoaderFactory,

deps:[HttpClient]

}

}),

// then

WMLFieldNGXTranslateModule

// for regular

WMLFieldModule

package uses @windmillcode/angular-wml-components-base

v2.1.0

provided serveral methods to help with retrieving different values realted to the fields

getReactiveFormControl

getLabel

getRequiredLabel

getLabelPart

updateLabel

updateRequiredLabel

updateLabelPart

deleteLabelPart

deleteRequiredLabelPart

deleteLabel

v2.1.1

made id accessible on selector itself, access via wmlField.view.id

v16.2.60

added WMLField#getParentForm WMLField#getFormControlName as additional methods

v16.2.70

added addititional features %!(EXTRA string=

v16.2.80

updated package to reflect the version 16.2.80 of @angular/core package),

v16.2.80

updated package to reflect the version 16.2.80 of @angular/core package,

v16.2.90

updated package to reflect the version 16.2.90 of @angular/core package,

v16.2.91

updated package to reflect the version 16.2.91 of @angular/core package

v16.2.92

made BREAKING CHANGES to wmlfield replacing all WMLCustomComponent.meta with WMLCustomComponent.props ,

v16.2.93

updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v16.2.100

updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v16.2.110

updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v16.2.120

updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v17.0.10

updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v17.0.11

updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,

v17.0.20

updated package to reflect the version ^17.0.2 of @angular/core package,

v17.0.40

updated package to reflect the version ^17.0.4 of @angular/core package,

v17.0.50

updated package to reflect the version ^17.0.5 of @angular/core package,

v17.0.60

updated package to reflect the version ^17.0.6 of @angular/core package,

v17.0.70

updated package to reflect the version ^17.0.7 of @angular/core package,

v17.0.7100

updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.7200

updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.7300

updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.80

updated package to reflect the version ^17.0.8 of @angular/core package,

v17.0.8100

updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.8102

updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.8103

updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.9000

updated package to conform with @windmillcode/angular-wml-components-base ,

v17.0.9001

updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.0000

updated package to reflect the version ^17.1.0 of @angular/core package,

v17.1.2

updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.1000

updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.2000 [2/5/24]

updated package to reflect the version ^17.1.2 of @angular/core package,

v17.1.2001 [2/8/24]

updated package to conform with @windmillcode/angular-wml-components-base ,

v17.1.3000 [2/8/24]

updated package to reflect the version ^17.1.3 of @angular/core package,

v17.2.1000 [2/17/24]

updated package to reflect the version ^17.2.1 of @angular/core package,

v17.2.2000 [2/23/24]

updated package to reflect the version ^17.2.2 of @angular/core package,

v17.2.2001 [2/23/24]

updated package to reflect the version ^17.2.2 of @angular/core package,

v17.2.3000 [2/28/24]

updated package to reflect the version ^17.2.3 of @angular/core package,

v17.2.3001 [3/2/24]

updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.3002 [3/5/24]

updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4000 [3/8/24]

updated package to reflect the version ^17.2.4 of @angular/core package,

v17.2.4001 [3/12/24]

updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4002 [3/12/24]

updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4003 [3/13/24]

updated package to conform with @windmillcode/angular-wml-components-base ,

v17.2.4004 [3/13/24]

updated package to conform with @windmillcode/angular-wml-components-base ,

v17.3.0 [3/17/24]

updated package to reflect the version ^17.3.0 of @angular/core package ,

v17.3.1000 [3/22/24]

updated package to reflect the version ^17.3.1 of @angular/core package,

v17.3.2000 [3/28/24]

updated package to reflect the version ^17.3.2 of @angular/core package,

v17.3.3000 [4/4/24]

updated package to reflect the version ^17.3.3 of @angular/core package,

v17.3.4000 [4/11/24]

updated package to reflect the version ^17.3.4 of @angular/core package,

v17.3.4001 [4/16/24]

updated package to conform with @windmillcode/angular-wml-components-base ,

v17.3.5000 [4/20/24]

updated package to reflect the version ^17.3.5 of @angular/core package,

v17.3.5110 [5/1/24]

updated package to conform with @windmillcode/angular-wml-components-base [PATCH] Enhanced WMLField class in wml-field.component.ts by adding generic types for form control and parameters, allowing more flexible and type-safe custom component integrations.[UPDATE] Added getFieldProps and updated getReactiveFormControl methods in WMLField class for better handling and customization of form controls and their properties. ,

v17.3.6000 [5/1/24]

updated package to reflect the version ^17.3.6 of @angular/core package,

v17.3.7000 [5/9/24]

updated package to reflect the version ^17.3.7 of @angular/core package,

v17.3.8000 [5/9/24]

updated package to reflect the version ^17.3.8 of @angular/core package,

v17.3.9000 [5/16/24]

updated package to reflect the version ^17.3.9 of @angular/core package,

v18.0.1 [5/22/24]

updated package to reflect the version ^18.0.0 of @angular/core package,

v18.0.4 [5/25/24]

updated package to conform with @windmillcode/angular-wml-components-base ,

v18.0.1000 [5/29/24]

updated package to reflect the version ^18.0.1 of @angular/core package,

v18.0.2000 [6/6/24]

updated package to reflect the version ^18.0.2 of @angular/core package,

v18.0.3000 [6/13/24]

updated package to reflect the version ^18.0.3 of @angular/core package,

v18.0.3010 [6/18/24]

updated package to conform with @windmillcode/angular-wml-components-base ,

v18.0.4000 [6/23/24]

updated package to conform with @windmillcode/angular-wml-components-base ,

v18.0.5000 [6/26/24]

updated package to reflect the version ^18.0.5 of @angular/core package,

v18.0.6000 [7/5/24]

updated package to reflect the version ^18.0.6 of @angular/core package,

v18.1.3 [7/13/24]

updated package to reflect the version ^18.1.0 of @angular/core package,

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]

updated package to conform with @windmillcode/angular-wml-components-base ,

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]

updated package to reflect the version ^18.1.2 of @angular/core package

v18.1.2100 [7/26/24]

[BREAKING CHANGE] replaced main tags with div tags ,

v18.1.2300 [7/27/24]

updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.2301 [7/30/24]

updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.3000-beta1 [8/1/24]

updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.3000-beta2 [8/1/24]

updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.3000-beta3 [8/1/24]

updated package to conform with @windmillcode/angular-wml-components-base ,

v18.1.3000-beta4 [8/1/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3001

[BREAKING CHANGES] WMLFieldZero props default constructor object property is now a WMLDeepPartial of the class

v18.1.3001 [8/4/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3002 [8/4/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3001 [8/4/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3002 [8/5/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3003 [8/5/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3004 [8/5/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3005 [8/5/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3006 [8/5/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.1.3007 [8/5/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.1.4000 [8/14/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.1.4001 [8/14/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.2.0 [8/15/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.2.1 [8/20/24]

updated package to conform with @windmillcode/angular-wml-components-base

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]

updated package to reflect the version 18.2.2 of @angular/core package

v18.2.2100 [9/1/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.2.2101 [9/1/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.2.2200 [9/3/24]

updated package to conform with @windmillcode/angular-wml-components-base

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]

updated package to reflect the version 18.2.3 of @angular/core package

v18.2.3110 [9/10/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.2.3112 [9/10/24]

updated package to conform with @windmillcode/angular-wml-components-base

v18.2.3200 [9/16/24]

updated package to conform with @windmillcode/wml-components-base

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]

updated package to conform with @windmillcode/wml-components-base

v18.2.4200 [9/21/24]

updated package to conform with @windmillcode/wml-components-base

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]

updated package to reflect the version 18.2.6 of @angular/core package

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]

updated package to conform with @windmillcode/wml-components-base

v18.2.7010 [10/9/24]

updated package to conform with @windmillcode/wml-components-base

v18.2.7020 [10/10/24]

updated package to conform with @windmillcode/wml-components-base

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]

updated package to reflect the version 18.2.8 of @angular/core package

v18.2.8001 [10/11/24]

updated package to conform with @windmillcode/wml-components-base

v18.2.9000 [10/23/24]

updated package to conform with @windmillcode/wml-components-base

v18.2.10000 [10/31/24]

updated package to conform with @windmillcode/wml-components-base

v18.2.11000 [11/7/24]

updated package to conform with @windmillcode/wml-components-base

v18.2.12000 [11/15/24]

updated package to conform with @windmillcode/wml-components-base

v18.2.12001 [11/17/24]

updated package to conform with @windmillcode/wml-components-base

v19.0.0 [11/19/24]

updated package to conform with @windmillcode/wml-components-base

v19.0.3 [11/20/24]

updated package to conform with @windmillcode/wml-components-base

v19.0.4 [11/26/24]

updated package to conform with @windmillcode/wml-components-base

v19.0.1000 [11/26/24]

updated package to conform with @windmillcode/wml-components-base

Files

wml-field

Directory actions

More options

Directory actions

More options

Latest commit

History

wml-field

Folders and files

parent directory

README.md

WML Field

Installation

Usage

WMLFieldZero

Getting Started

Error Messages

Editing Field Features

Advanced Setup

Reference

WMLFieldZeroProps Properties

WMLFieldZeroProps Methods

WMLLabelZeroProps Class Properties

WMLLabelZeroProps Class Methods

Changelog

v0.0.6

v1.0.0

v2.0.0

v2.1.0

v2.1.1

v16.2.60

v16.2.70

v16.2.80

v16.2.80

v16.2.90

v16.2.91

v16.2.92

v16.2.93

v16.2.100

v16.2.110

v16.2.120

v17.0.10

v17.0.11

v17.0.20

v17.0.40

v17.0.50

v17.0.60

v17.0.70

v17.0.7100

v17.0.7200

v17.0.7300

v17.0.80

v17.0.8100

v17.0.8102

v17.0.8103

v17.0.9000

v17.0.9001

v17.1.0000

v17.1.2

v17.1.1000

v17.1.2000 [2/5/24]

v17.1.2001 [2/8/24]

v17.1.3000 [2/8/24]

v17.2.1000 [2/17/24]

v17.2.2000 [2/23/24]

v17.2.2001 [2/23/24]

v17.2.3000 [2/28/24]

v17.2.3001 [3/2/24]

v17.2.3002 [3/5/24]

v17.2.4000 [3/8/24]

v17.2.4001 [3/12/24]

v17.2.4002 [3/12/24]

v17.2.4003 [3/13/24]

v17.2.4004 [3/13/24]

v17.3.0 [3/17/24]

v17.3.1000 [3/22/24]

v17.3.2000 [3/28/24]

v17.3.3000 [4/4/24]

v17.3.4000 [4/11/24]