Platform: Label Component Technical Design

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">
        <fdp-label [id]="id" [label]="label" [required]="true" [formControl]="l1_formControl"></fdp-label>
        <fdp-input [formControl]="ff.formControl"></fdp-input>
      </fdp-form-field>
</fdp-form-group>

@Component({
    selector: 'app-root',
    templateUrl: ''
})
export class AppComponent {
     constructor() {

    this.form = new FormGroup({});

    this.l1_formControl = new FormControl('', [Validators.somevalidator]);
}

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

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: <fdp-form-field #ffl1 [id]="'firstName'" hint="Hint for one " zone="zLeft" [validators]="validators" rank="10" [required]="required" [label-wrap]="true"> <fdp-input [formControl]="ffl1.formControl">

   inside form-field/form-field.component.html <ng-template #renderer>

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

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