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?