Label in front of input field

[AyazSardar]

Hi,

There is an example for putting a icon in front of the input field: { "key": "fixedIcon", "type": "lx-input", "templateOptions": { "type": "text", "fixedLabel": true, "icon": "account", "label": "With Icon" } }

Is it possible to just show a text label in front of the input field?

Ayaz

[ShMcK]

Hi Ayaz,

The true power of Angular-Formly is when you realize you can customize everything to your own liking.

I can think of three good approaches for inline labels. One is to use lx-flex, but if you're going to put labels in front of a lot of fields, this is not the best choice.

I would recommend making your own custom template. There's a good video and docs explaining how.

Your template would look something like this, with a class of "text-label" & "form-field" styling the positions:

<div class="form-field">
<label class="text-label">{{to.label}}</label>
<lx-text-field model="::model[options.key]"
               icon="{{::to.icon}}"
               fixed-label="::to.fixedLabel"
               theme="{{::to.theme}}"
               disabled="to.disabled"
               valid="fc.$valid && fc.$touched"
               error="fc.$invalid && fc.$touched">
    <input ng-model="model[options.key]"
           type="{{::to.type}}"
           aria-label="{{::to.label}}"
           ng-class="::to.className"/>
</lx-text-field>
</div>

A final option would be to create your own "wrapper". This could wrap around any element getting the same effect.

<div class="form-field">
       <label>{{to.label}}</label>
    <formly-transclude></formly-transclude>
</div>

You could call it "label-wrapper", and add it.

key: 'someKey',
type: 'lx-input',
wrapper: 'label-wrapper',
templateOptions: {
  label-wrapper: {
     label: 'Some label'
  }
}

Let me know if you have any questions.

[AyazSardar]

Thanks ShMcK, I will try this later today.