control error display for options input component
This commit is contained in:
@@ -2,8 +2,13 @@
|
||||
{% from "components/tooltip.html" import Tooltip %}
|
||||
|
||||
{% macro OptionsInput(field, tooltip, inline=False) -%}
|
||||
<optionsinput name='{{ field.name }}' inline-template key='{{ field.name }}'>
|
||||
<div class='usa-input {% if field.errors %}usa-input--error{% endif %}'>
|
||||
<optionsinput
|
||||
name='{{ field.name }}'
|
||||
inline-template
|
||||
{% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
|
||||
key='{{ field.name }}'>
|
||||
<div
|
||||
v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
|
||||
|
||||
<fieldset v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
|
||||
<legend>
|
||||
@@ -16,18 +21,15 @@
|
||||
<span class='usa-input__help'>{{ field.description | safe }}</span>
|
||||
{% endif %}
|
||||
|
||||
{% if field.errors %}
|
||||
{{ Icon('alert',classes="icon-validation") }}
|
||||
{% endif %}
|
||||
<span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
|
||||
<span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
|
||||
</legend>
|
||||
|
||||
{{ field() }}
|
||||
|
||||
{% if field.errors %}
|
||||
{% for error in field.errors %}
|
||||
<span class='usa-input__message'>{{ error }}</span>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<template v-if='showError'>
|
||||
<span class='usa-input__message' v-html='validationError'></span>
|
||||
</template>
|
||||
|
||||
</fieldset>
|
||||
</div>
|
||||
|
Reference in New Issue
Block a user