{{twbs-form-group}} Enhancements
Opened this issue · 0 comments
nadnoslen commented
Using block params to the {{twbs-form-group}}
component can open some very pleasant possibilities. For example we can provide basic label, text/textarea inputs, help blocks and of course the errors block that we already support.
Here is an example of creating a full form group for a text input:
{{#twbs-form-group fieldErrors=model.errors.fieldName as | fg |}}
{{#fg.label for="js-theInput"}}The Input Label{{/fg.label}}
{{fg.input-text placeholder="The Input Placeholder" title="The Input Title" type="number" value=model.fieldName}}
{{#fg.help-block}}The input help block.{{/fg.help-block}}
{{/twbs-form-group}}
Here is an example of creating a full form group for a auto-sizing text area:
{{#twbs-form-group fieldErrors=model.errors.fieldName as | fg |}}
{{#fg.label for="js-theInput"}}The Input Label{{/fg.label}}
{{fg.text-area placeholder="The Input Placeholder" title="The Input Title" value=model.fieldName}}
{{#fg.help-block}}The input help block.{{/fg.help-block}}
{{/twbs-form-group}}
Here is an example of creating a full form group for a markdown text-area with a preview toggle
{{#twbs-form-group fieldErrors=model.errors.fieldName as | fg |}}
{{#fg.label-md for="js-theInput"}}The Input Label{{/fg.label}}
{{fg.text-area-md placeholder="The Input Placeholder" title="The Input Title" value=model.fieldName}}
{{#fg.help-block}}The input help block.{{/fg.help-block}}
{{/twbs-form-group}}