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.

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