Fix input validations

templates/components/text_input.html

@@ -4,24 +4,22 @@
   <textinput
     name='{{ field.name }}'
     validation='{{ validation }}'
-    {% if field.data %}set-value='{{ field.data }}'{% endif %}
+    {% if field.data %}initial-value='{{ field.data }}'{% endif %}
+    {% if field.errors %}v-bind:initial-errors='{{ field.errors }}'{% endif %}
     inline-template>
 
     <div
-      v-bind:class="['usa-input {% if field.errors %}usa-input--error{% endif %} usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
+      v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
 
       <label for={{field.name}}>
-        {{ field.label }}
+        {{ field.label | striptags }}
+
         {% if field.description %}
           <span class='usa-input__help'>{{ field.description | safe }}</span>
         {% endif %}
 
-        {% if field.errors %}
-          {{ Icon('alert') }}
-        {% endif %}
-
-        <template v-if='showError'>{{ Icon('alert') }}</template>
-        <template v-if='showValid'>{{ Icon('ok') }}</template>
+        <span v-show='showError'>{{ Icon('alert') }}</span>
+        <span v-show='showValid'>{{ Icon('ok') }}</span>
 
       </label>
 
@@ -32,7 +30,6 @@
           v-on:change='onChange'
           v-bind:value='value'
           id='{{ field.name }}'
-          name='{{ field.name }}'
           ref='input'
           placeholder='{{ placeholder }}'>
         </textarea>
@@ -47,7 +44,6 @@
           v-bind:pipe='pipe'
           v-bind:keep-char-positions='keepCharPositions'
           id='{{ field.name }}'
-          name='{{ field.name }}'
           type='text'
           ref='input'
           placeholder='{{ placeholder }}'
@@ -56,11 +52,12 @@
 
       {% endif %}
 
-      {% if field.errors %}
-        {% for error in field.errors %}
-          <span class='usa-input__message'>{{ error }}</span>
-        {% endfor %}
-      {% endif %}
+      <input type='hidden' v-bind:value='rawValue' name='{{ field.name }}' />
+
+      <template v-if='showError'>
+        <span v-for='error in initialErrors' class='usa-input__message' v-html='error'></span>
+      </template>
+
     </div>
 </textinput>
 {%- endmacro %}