starlightViewModes.switchTofunction h(){const t=window.location.hash;document.querySelectorAll(".starlight-view-modes-switcher-a").forEach(e=>{e.href&&(e.href=e.href.split("#")[0]+t)})}h();window.addEventListener("hashchange",h);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.
Section titled “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
Section titled “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>
Section titled “Error Messages”<iframe src="https://stackblitz.com/edit/stackblitz-starters-g2agli?ctl=1&embed=1&file=src%2Fmain.ts&theme=dark" style="width: 100%; height: calc(500/16 * 1em) !important;"></iframe>
Section titled “Editing Field Features”<iframe src="https://stackblitz.com/edit/stackblitz-starters-jaykgw?ctl=1&embed=1&file=src%2Fmain.ts&theme=dark" style="width: 100%; height: calc(500/16 * 1em) !important;"></iframe>
Section titled “Advanced Setup”<iframe src="https://stackblitz.com/edit/stackblitz-starters-kufze9?ctl=1&embed=1&file=src%2Fmain.ts&theme=dark" style="width: 100%; height: calc(500/16 * 1em) !important;"></iframe>
Section titled “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. |
Section titled “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. |
Section titled “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. |
Section titled “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 |
Section titled “v0.0.6”added updateLabel and updateRequiredLabel wrappers for updateLabelPart which allow to update the input of a field
Section titled “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
Section titled “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
Section titled “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
Section titled “v2.1.1”made id accessible on selector itself, access via wmlField.view.id
Section titled “v16.2.60”added WMLField#getParentForm WMLField#getFormControlName as additional methods
Section titled “v16.2.70”added addititional features %!(EXTRA string=
Section titled “v16.2.80”updated package to reflect the version 16.2.80 of @angular/core package),
Section titled “v16.2.80”updated package to reflect the version 16.2.80 of @angular/core package,
Section titled “v16.2.90”updated package to reflect the version 16.2.90 of @angular/core package,
Section titled “v16.2.91”updated package to reflect the version 16.2.91 of @angular/core package
Section titled “v16.2.92”made BREAKING CHANGES to wmlfield replacing all WMLCustomComponent.meta with WMLCustomComponent.props ,
Section titled “v16.2.93”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
Section titled “v16.2.100”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
Section titled “v16.2.110”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
Section titled “v16.2.120”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
Section titled “v17.0.10”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
Section titled “v17.0.11”updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
Section titled “v17.0.20”updated package to reflect the version ^17.0.2 of @angular/core package,
Section titled “v17.0.40”updated package to reflect the version ^17.0.4 of @angular/core package,
Section titled “v17.0.50”updated package to reflect the version ^17.0.5 of @angular/core package,
Section titled “v17.0.60”updated package to reflect the version ^17.0.6 of @angular/core package,
Section titled “v17.0.70”updated package to reflect the version ^17.0.7 of @angular/core package,
Section titled “v17.0.7100”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.0.7200”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.0.7300”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.0.80”updated package to reflect the version ^17.0.8 of @angular/core package,
Section titled “v17.0.8100”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.0.8102”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.0.8103”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.0.9000”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.0.9001”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.1.0000”updated package to reflect the version ^17.1.0 of @angular/core package,
Section titled “v17.1.2”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.1.1000”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.1.2000 [2/5/24]”updated package to reflect the version ^17.1.2 of @angular/core package,
Section titled “v17.1.2001 [2/8/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.1.3000 [2/8/24]”updated package to reflect the version ^17.1.3 of @angular/core package,
Section titled “v17.2.1000 [2/17/24]”updated package to reflect the version ^17.2.1 of @angular/core package,
Section titled “v17.2.2000 [2/23/24]”updated package to reflect the version ^17.2.2 of @angular/core package,
Section titled “v17.2.2001 [2/23/24]”updated package to reflect the version ^17.2.2 of @angular/core package,
Section titled “v17.2.3000 [2/28/24]”updated package to reflect the version ^17.2.3 of @angular/core package,
Section titled “v17.2.3001 [3/2/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.2.3002 [3/5/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.2.4000 [3/8/24]”updated package to reflect the version ^17.2.4 of @angular/core package,
Section titled “v17.2.4001 [3/12/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.2.4002 [3/12/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.2.4003 [3/13/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.2.4004 [3/13/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.3.0 [3/17/24]”updated package to reflect the version ^17.3.0 of @angular/core package ,
Section titled “v17.3.1000 [3/22/24]”updated package to reflect the version ^17.3.1 of @angular/core package,
Section titled “v17.3.2000 [3/28/24]”updated package to reflect the version ^17.3.2 of @angular/core package,
Section titled “v17.3.3000 [4/4/24]”updated package to reflect the version ^17.3.3 of @angular/core package,
Section titled “v17.3.4000 [4/11/24]”updated package to reflect the version ^17.3.4 of @angular/core package,
Section titled “v17.3.4001 [4/16/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v17.3.5000 [4/20/24]”updated package to reflect the version ^17.3.5 of @angular/core package,
Section titled “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. ,
Section titled “v17.3.6000 [5/1/24]”updated package to reflect the version ^17.3.6 of @angular/core package,
Section titled “v17.3.7000 [5/9/24]”updated package to reflect the version ^17.3.7 of @angular/core package,
Section titled “v17.3.8000 [5/9/24]”updated package to reflect the version ^17.3.8 of @angular/core package,
Section titled “v17.3.9000 [5/16/24]”updated package to reflect the version ^17.3.9 of @angular/core package,
Section titled “v18.0.1 [5/22/24]”updated package to reflect the version ^18.0.0 of @angular/core package,
Section titled “v18.0.4 [5/25/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.0.1000 [5/29/24]”updated package to reflect the version ^18.0.1 of @angular/core package,
Section titled “v18.0.2000 [6/6/24]”updated package to reflect the version ^18.0.2 of @angular/core package,
Section titled “v18.0.3000 [6/13/24]”updated package to reflect the version ^18.0.3 of @angular/core package,
Section titled “v18.0.3010 [6/18/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.0.4000 [6/23/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.0.5000 [6/26/24]”updated package to reflect the version ^18.0.5 of @angular/core package,
Section titled “v18.0.6000 [7/5/24]”updated package to reflect the version ^18.0.6 of @angular/core package,
Section titled “v18.1.3 [7/13/24]”updated package to reflect the version ^18.1.0 of @angular/core package,
Section titled “v18.1.4 [7/13/24]”updated package to reflect the version ^18.1.0 of @angular/core package,
Section titled “v18.1.6 [7/14/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.1.1000 [7/18/24]”updated package to reflect the version ^18.1.1 of @angular/core package,
Section titled “v18.1.2000 [7/24/24]”updated package to reflect the version ^18.1.2 of @angular/core package
Section titled “v18.1.2100 [7/26/24]”[BREAKING CHANGE] replaced main tags with div tags ,
Section titled “v18.1.2300 [7/27/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.1.2301 [7/30/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.1.3000-beta1 [8/1/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.1.3000-beta2 [8/1/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.1.3000-beta3 [8/1/24]”updated package to conform with @windmillcode/angular-wml-components-base ,
Section titled “v18.1.3000-beta4 [8/1/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.3001”[BREAKING CHANGES] WMLFieldZero props default constructor object property is now a WMLDeepPartial of the class
Section titled “v18.1.3001 [8/4/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.3002 [8/4/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.3001 [8/4/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.3002 [8/5/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.3003 [8/5/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.3004 [8/5/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.3005 [8/5/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.3006 [8/5/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.3007 [8/5/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.4000 [8/14/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.1.4001 [8/14/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.2.0 [8/15/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.2.1 [8/20/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.2.1000 [8/22/24]”updated package to reflect the version 18.2.1 of @angular/core package
Section titled “v18.2.2000 [8/30/24]”updated package to reflect the version 18.2.2 of @angular/core package
Section titled “v18.2.2100 [9/1/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.2.2101 [9/1/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.2.2200 [9/3/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.2.3000 [9/4/24]”updated package to reflect the version 18.2.3 of @angular/core package
Section titled “v18.2.3100 [9/8/24]”updated package to reflect the version 18.2.3 of @angular/core package
Section titled “v18.2.3110 [9/10/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.2.3112 [9/10/24]”updated package to conform with @windmillcode/angular-wml-components-base
Section titled “v18.2.3200 [9/16/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v18.2.4000 [9/16/24]”updated package to reflect the version 18.2.4 of @angular/core package
Section titled “v18.2.4100 [9/19/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v18.2.4200 [9/21/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v18.2.5001 [9/22/24]”updated package to reflect the version 18.2.5 of @angular/core package
Section titled “v18.2.6000 [10/1/24]”updated package to reflect the version 18.2.6 of @angular/core package
Section titled “v18.2.7000 [10/2/24]”updated package to reflect the version 18.2.7 of @angular/core package
Section titled “v18.2.7001 [10/5/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v18.2.7010 [10/9/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v18.2.7020 [10/10/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v18.2.8000 [10/10/24]”updated package to reflect the version 18.2.8 of @angular/core package
Section titled “v18.2.8000 [10/11/24]”updated package to reflect the version 18.2.8 of @angular/core package
Section titled “v18.2.8001 [10/11/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v18.2.9000 [10/23/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v18.2.10000 [10/31/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v18.2.11000 [11/7/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v18.2.12000 [11/15/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v18.2.12001 [11/17/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v19.0.0 [11/19/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v19.0.3 [11/20/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v19.0.4 [11/26/24]”updated package to conform with @windmillcode/wml-components-base
Section titled “v19.0.1000 [11/26/24]”updated package to conform with @windmillcode/wml-components-base