-
Notifications
You must be signed in to change notification settings - Fork 135
Platform: Text Input Component Technical Design
The text input is used to enter single of text. When empty, it can hold a placeholder similar to a select component. You can define the height and width of the text input and also determine specific behaviour when handling texts.
<fdp-input
[type]="cozy|compact"
[label]="Label for textarea:"
[labelIcon]="icon-name"
[isMandatory]="false | true"
[placeholderText]="Start writing something"
[state]="disabled|warning|valid|invalid|readonly"
[hint]="This is a sample message"
[growing]="true | false"
[maxLength]="35"
[disabled]="true | false"
>
</fdp-input>can be cozy or compact type of input form factors
Label is the name of the control. This should not be the same text as placeholder. Part of Label Component.
An icon alongside the label to indicate that inline help is available. Part of Label Component(?).
Whether the input is required(asterisk) to be filled. Part of Label Component.
The prompt text that is displayed when the input field is empty.
Can be one of disabled|warning|valid|invalid|readonly. The helpMessage will take the appropriate state's colour.
A short message to provide feedback to users what has to be entered.
Whether the input should grow dynamically based on the content.
The maximum number of characters that can be entered in this input.
this marks input variable as read only.
N/A
N/A
N/A
N/A
Form, Label
Note: Please note that label, labelIcon and isMandatory will be implemented/changed depending on how Label component is implemented.
from Lokanathan:
how to handle the input validation in the input text, should we proceed with the type of data type like number | string | etc
Frank:: Please read my other comments I gave about TextArea also you guys should look at and very carefully study and master, Angular Forms. Template/Reactive Driven, Try to write several sample applications, dont start with this yet.
- Also we need to use common sense too:
- Why would you need attribute rows? on the input field?
- we will be changing type - size and leave this reserved for actual type, type is number, text, phone, email, ...
[type]="cozy|compact" [label]="Label for textarea:" [labelIcon]="icon-name" [isMandatory]="false | true" [placeholderText]="Start writing something" [state]="disabled|warning|valid|invalid|readonly" [hint]="This is a sample message" [growing]="true | false" [maxLength]="35" [showExceededText]="true" [disabled]="true | false"