MPage Simple Input Component
The MPage Simple Input Component provides a quick and simple component for generating text input fields using Angular Material input fields or standard HTML input/textarea fields.
In addition to being a quickly bindable field to ngModel or Angular FormBuilder, the MPage simple input control has a few additional time saving features including:
- Removal and replacement of Unicode characters. Unicode quotes are replaced with ASCII quotes preventing compatability issues when data is stored back into Cerner.
- A clear button appears when users enter text for quick clearing of values.
- Ability to add hint text below the field.
- Helper properties such as CSS styling, disabled settings, and more.
The goal of this component is to simply save on developer typing. Instead of 5 lines of code, you have 1. Nothing in this component other than the Unicode replacement is different from the standard Angular Material Input component.
Implementation
Implement the simple input component by adding the <mpage-simple-input></mpage-simple-input> element to your Angular HTML code and bind a variable to it.
<mpage-simple-input label="Standard Text Field" [(ngModel)]="textField1"></mpage-simple-input>
Adding the type="textarea" parameter will generate a text area field.
<mpage-simple-input label="Text Area" type="textarea" [(ngModel)]="textArea1"></mpage-simple-input>
Options Grid
| Item | Binding | Data Type | Description |
|---|---|---|---|
| class | Input | string | CSS class to apply to the field. |
| disabled | Input | boolean | Determines if data entry is disabled. |
| hint | Input | string | Optional hint label to display below field. |
| label | Input | string | Text to display in field to identify it to users |
| maxLength | Input | number | Forces a limited number of characters a user can enter in the field. |
| ngModel | Input/Output | string | The string variable used to store your user entry. |
| plainInput | Input | boolean | If set to true, a standard HTML version of the input and textarea field is used. |
| rows | Input | number | Determines the number of rows to display for a text area field. The default value is set to 5 and is ignored when the type parameter is set to "text". |
| type | Input | string | Default value is set to "text". Allowed values are "text" and "textarea" which is used to determine if the field is displayed as a text or text area field. |
| V4+ skipUnicodeReplace | Input | boolean | Allows entry of Unicode characters. Improper handling of Unicode versus ASCII characters can result in corruption of your data. Use this feature with caution. |