cybertooth-io/ember-data-bootstrap3-forms

{{twbs-form-group}} Enhancements

Opened this issue · 0 comments

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