Skip to content

Platform: Label Component Technical Design

Jump to bottom
kavya-b edited this page May 14, 2020 · 15 revisions

Label Component

Summary

Label will be a read only text before any Form Input elements. Labels for required fields are marked with an asterisk in some colour.

Design

<fdp-label
    [id]="id"
    [label]="label"
    [required]="true|false"
    [asteriskAlignment]="left|right"
    [wrap]="true|false"
    >
</fdp-label>

Example:

<fdp-form-group #fg [multiLayout]="true" [formGroup]="form">
      <fdp-form-field #ff [id]="'firstName'" hint="Hint for one "
                      zone="zLeft" [validators]="validators" [required]="true" [wrap]="true">
        <fdp-input [formControl]="ff.formControl"></fdp-input>
      </fdp-form-field>
</fdp-form-group>

Inside form-field/form-field.component.html 
    <ng-template #renderer>
      <div fd-form-item style="display: inline-block;">
        <fdp-label [id]="id" [label]="label" [required]="required" [wrap]="true"></fdp-label>
        <ng-content></ng-content>
      </div>
    </ng-template>

Property Bindings

id: string

Setting "for" attribute for label, this should be same as corresponding Input element Id. Label Text will be set to this value.

label: string

setting display text for label. By default it will be right-aligned.

required: Boolean

setting this value to true when if the corresponding "input Element" has mandatory value requirement. It will show *( asterisk, comes from css) in some colour(comes from css).

asteriskAlignment: String

value will decide the position of asterisk, either left-top or right-top. It will be enabled only required flag is true. Default value will be right-top.

Wrap: Boolean

Setting true will wrap the content to align text with other Form Element.

required

this field value will be coming from form-field required property. but in case of standalone component, this property passed value will be used to mark Asterisk(*).

Event Bindings

N/A

Two-Way Bindings

N/A

Content Projection

N/A

Interfaces and Types

Related Modules

  1. fd-form-label

i18n

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

Special Usecase: No

  • fdp-label's label attribute can be supported with string binding and using i18n-label:
<fdp-label
    [id]="id"
    i18n-label="@@translateLabel"
    label="label"
    [required]="true|false"
    [asteriskAlignment]="left|right"
    [wrap]="true|false"
    >
</fdp-label>

Redesign Required: No

Additional Notes

  1. Use of fd-form-label as base of fdp-label

Questions:

Deepak:-
  1. Will the side of asterisk changes if Text-alignment changes from right to left?

Frank

  • it looks straight forward, the only thign I dont thing we need required as part of the label.
    • just think of it when you will have noLabel Layout as the field will be part of some other group, you will not be able to add asterix to it. and you will have to do this manually.
  • Do we need label to wrap?
  • What about overflow the ...

Deepak:-

  1. Do we need label to wrap?--- yes in FRD it is mentioned that label should wrap if it is long string and wrap option is enabled.
  2. What about overflow the ... ---- when wrapping is disabled, Truncation class will apply.
  3. required field: Assuming Label will be part of form-field(As implemented in Demo). we have to pass properties necessary in Label component with help of form-field making a property of form-field. Same have to be done for required field.

Ex: please see required and wrap property uses here.

<fdp-form-field #ffl1 [id]="'firstName'" hint="Hint for one " zone="zLeft"
                      [validators]="validators" rank="10" [required]="required" [wrap]="true">
        <fdp-input [formControl]="ffl1.formControl"></fdp-input>
</fdp-form-field>

    inside form-field/form-field.component.html

    <ng-template #renderer>
      <div fd-form-item style="display: inline-block;">
        <fdp-label [id]="id" [label]="label" [required]="required" [wrap]="true"></fdp-label>
        <ng-content></ng-content>
      </div>
    </ng-template>

Here required and wrap is required by LabelComponent, and it need to be passed from fdp-form-field only.

  1. As Label-component is inside form-field, user will not be supplying FormControl for LabelComponent. Is my Assumption correct?

Frank:-

  • Now we are touching topic that without having design for form layouts you are not able to do this properly.
  • We dont know how labels will appear in the forms, where how how to put asterix, what about forms without label?

Right now we need proper design that talk about how to layout:

  • Labels and input together,
  • where and what position to show hints, where to show errors
  • Can we have labels next to the field or only on top of, what about fields without labels
  • Can we layout fields only into 1 columns or more colummns?
  • Can have one show other complex fields? like address so it there will be forms inside form?
  • What if the fields is other complex fields (entity) do we need to navigate to detail of such entity?
  • What about line items on enterprise we deal with line items ..

Right now we are building a house from top instead of from bottom up.

Clone this wiki locally