@windmillcode/angular-wml-input v17.3.6000
Overview
The wml-input
library is a specialized Angular component designed to enhance the form input experience in Angular applications. It provides a robust set of features that simplify the process of creating, validating, and managing form inputs, particularly focusing on user interaction and data binding. The library aims to solve common problems associated with form handling in Angular, such as maintaining sync between the UI and the model, providing instant feedback to users, and integrating seamlessly with Angular's form validation mechanisms. By offering a comprehensive suite of input-related functionalities, wml-input
helps developers build more interactive, user-friendly forms with less boilerplate code.
At the heart of the wml-input
library are its central components, which include WmlInputTextComponent
, WmlInputNumberComponent
, and WmlInputDateComponent
, among others. Each of these components is tailored to handle specific types of input, offering features like formatting, validation, and custom styling. For instance, WmlInputTextComponent
is optimized for text input and includes properties for trimming and formatting, while WmlInputNumberComponent
focuses on numerical input with features for number formatting and validation. These components are designed to work together seamlessly, providing a consistent and intuitive API for developers. They can be easily customized through a variety of parameters and methods, allowing for dynamic content loading and real-time interaction. Additionally, the library encourages certain implementation patterns, such as using specific components as containers or specifying child components, to promote best practices in Angular form development and ensure optimal performance and usability.
Installation
npm install -d @windmillcode/angular-wml-input
Usage
Text Input Example
In your component's HTML file, you can use wml-input-text
to create a text input field. It's integrated with Angular forms to support features like data binding and validation.
<!-- app.component.html -->
<form [formGroup]="form">
<wml-input-text formControlName="textInput" placeholder="Enter text"></wml-input-text>
</form>
In the corresponding TypeScript file, you define the form control within an Angular form group.
// app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
form: FormGroup;
constructor() {
this.form = new FormGroup({
textInput: new FormControl(''),
});
}
}
Number Input Example
For numerical inputs, use wml-input-number
to allow users to enter numbers, which also supports Angular form validation and binding.
<!-- app.component.html -->
<form [formGroup]="form">
<wml-input-number formControlName="numberInput" placeholder="Enter number"></wml-input-number>
</form>
And in your TypeScript file:
// app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
form: FormGroup;
constructor() {
this.form = new FormGroup({
numberInput: new FormControl(0),
});
}
}
Date Input Example
To include a date input, wml-input-date
is used. This component facilitates the input of dates and integrates smoothly with Angular's reactive forms.
<!-- app.component.html -->
<form [formGroup]="form">
<wml-input-date formControlName="dateInput" placeholder="Select date"></wml-input-date>
</form>
The TypeScript setup might look like this:
// app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
form: FormGroup;
constructor() {
this.form = new FormGroup({
dateInput: new FormControl(new Date()),
});
}
}
Docs
WmlInputParams
Property | Type | Description |
---|---|---|
input | WMLInputAreaParams | Input area parameters |
textarea | WMLInputAreaParams | Textarea parameters |
range | WMLInputAreaParams | Range input parameters |
checkbox | WMLInputCheckboxParams | Checkbox input parameters |
datetime | WMLInputDatetimeParams | Datetime input parameters |
type | "datetime" | "time" | "date" | "range" | "input" | "number" | "password" | "email" | "tel" | "textarea" | "checkbox" | Input type |
wmlField | WMLField | WMLField instance for customization |
checkboxDesc | string | Description for checkbox input |
WMLInputAreaParams
Property | Type | Description |
---|---|---|
placeholder | string | Placeholder for input area |
WMLInputCheckboxParams
Property | Type | Description |
---|---|---|
desc | any | Description for checkbox input |
WMLInputDatetimeParams
Property | Type | Description |
---|---|---|
min | Date | Minimum date for input |
max | Date | Maximum date for input |
htmlMin | string | HTML-formatted minimum date |
htmlMax | string | HTML-formatted maximum date |
Changelog
2.0.0
BREAKING CHANGE WmlInputParams.input,WmlInputParams.textarea now have the type WMLInputAreaParams which extends WMLUIProperty with the placeholder application code will break must be updated
3.0.1
- MAJOR rename to angular-wml-input
- fixed 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
WmlInputNGXTranslateModule
// for regular
WmlInputModule
- all input types have id properties
16.2.6-0
- added in datetime support along with min max controls
- example
new WmlInputParams({
type:"datetime",
datetime:new WMLInputDatetimeParams({
min:new Date()
})
}),
16.2.61
- added support to help customize checkbox
16.2.70
- additional updates
16.2.71
- input does not use the id from the wmlfield.view, it uses its own corresponding type id %!(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.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.8101
- replaced ControlValueAccessor with the use of the formcontrol from wmlField.getReactiveFormControl, making integration without wml-form much easier ,
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.1001 2/5/24
- added feature where each type can get its own class added to the target input element
,
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 ,
v17.3.6000 5/1/24
- updated package to reflect the version ^17.3.6 of @angular/core package
9 days ago
9 days ago
19 days ago
23 days ago
28 days ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
9 months ago
8 months ago
6 months ago
7 months ago
7 months ago
9 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
8 months ago
6 months ago
7 months ago
8 months ago
11 months ago
11 months ago