Skip to content

{{twbs-form-group}} Enhancements #16

@nadnoslen

Description

@nadnoslen

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions