Platform: Text Input Component Technical Design - SAP/fundamental-ngx GitHub Wiki

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.

Platform vs. Core Implementation

  • The Platform implements the Input field as a component as opposed to the Core implementation which uses a fd-form-control directive.
  • The Platform Input component will implement the FormFieldControl interface, thus can be used with in the FormField component.

Example of Core implementation:

<input fd-form-control type="text" id="input-1" placeholder="Field placeholder text" />

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


i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Error messages will be supported as described in the Forms section in the above guidelines document.

Special Usecase: No

  • fdp-input can be supported as:
<fdp-input
  [id]="inputID"
  [size]="cozy|compact"
  i18n="@@contentTranslation"
  [maxLength]="35"
  [disabled]="true | false">
</fdp-input>
  • All other properties like placeholder will come from the Form Field Control component so their i18n handling will be done according to that component

Redesign Required: No


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
⚠️ **GitHub.com Fallback** ⚠️