Platform: Text Input Component Technical Design

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.

Example

<fdp-input
  [id]="inputID"
  [size]="cozy|compact"
  [placeholder]="Start writing something"
  [maxLength]="35"
  [disabled]="true | false">
</fdp-input>

Design

The Input has the same features and functionality as the Input component in Fundamental NGX: Core. As such, the Platform Input component will be a wrapper around the Core Input component and will provide identical bindings as Input. Additionally, since this is an input element, it needs to implement the FormFieldControl as described in the FormGroup Layout or extend existing BaseInputComponent.

Property Bindings

size: string

can be cozy or compact type of input form factors

maxlength: number

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

id: string

The label for this form field.

placeholder: string

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

---

Event Bindings

N/A

---

Two-Way Bindings

N/A

---

Content Projection

N/A

---

Interfaces

N/A

---

Related Modules

Form, Label

Additional Notes

---

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, ...

Frank::

• Why do you need maxLength ? the length should be always dictated by container. - Or if its not length like px then it can be limited by validators but this is something I already said