Skip to content

Platform: Text Input Component Technical Design

Jump to bottom
Lokanathan-k edited this page Dec 31, 2019 · 14 revisions

Text input Component

Summary

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.

Design:

<fdp-input
[size]="cozy|compact"
[labelIcon]="icon-name"
[isMandatory]="false | true"
[placeholderText]="Start writing something"
[state]="disabled|warning|valid|invalid|readonly"
[maxLength]="35"
[disabled]="true | false"
>
</fdp-input>

Usage with Forms:

<fdp-form-field #ff9 
[id]="'Detailed description'" 
[placeholder]="'Start entering detailed description'" 
hint="This is the inline help that comes as a tooltip" 
zone="zLeft" 
required="true" 
[validators]="inputValidator">
   <fdp-input [formControl]="ff9.formControl" [size]="'cozy'"></fdp-input>
</fdp-form-field>

Property Bindings

type: string

can be cozy or compact type of input form factors

size: string

Label is the name of the control. This should not be the same text as placeholder. Part of Label Component.

labelIcon: string

An icon alongside the label to indicate that inline help is available. Part of Label Component(?).

isMandatory: boolean

Whether the input is required(asterisk) to be filled. Part of Label Component.

state: string

Can be one of disabled|warning|valid|invalid|readonly. The helpMessage will take the appropriate state's colour.

maxlength: number

maxlength variable is used to restrict the length of the input values.

Property Bindings in fdp-form-field

id: string

The label for this form field.

hint: string

The text part of inline help that appears as a tooltip. Handled by form-field.

placeholder: string

The prompt text that is displayed when the input field is empty. Handled by form-field.

validators: ValidatorsFn[]

array of validations that will be applied to this input. eg in the above html snippet, [validators]="inputValidator", inputValidator will be something like this:

this.inputValidator = [
      Validators.maxLength(5), //allows max length of 5 characters
      Validators.pattern('[a-zA-Z ]*')   //allows only text as input
    ];

Event Bindings

N/A

Two-Way Bindings

N/A

Content Projection

N/A

Interfaces

N/A

Related Modules

Form, Label

Additional Notes

Note: Please note that label, labelIcon and isMandatory will be implemented/changed depending on how Label component is implemented.

Questions

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

Comments

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"

Clone this wiki locally