Update text input vue component so that it only shows the validation icon on mount when the form is not a form that is inset into a page

js/components/text_input.js

@@ -31,7 +31,7 @@ export default {
       type: Boolean,
       default: false,
     },
-    optional: Boolean,
+    insetForm: Boolean,
   },
 
   data: function() {
@@ -58,7 +58,11 @@ export default {
 
   mounted: function() {
     if (this.value) {
-      this._checkIfValid({ value: this.value, invalidate: true })
+      this._checkIfValid({
+        value: this.value,
+        invalidate: true,
+        showValidationIcon: !this.insetForm,
+      })
 
       if (this.mask && this.validation !== 'email') {
         const mask =
@@ -109,7 +113,11 @@ export default {
     },
 
     //
-    _checkIfValid: function({ value, invalidate = false }) {
+    _checkIfValid: function({
+      value,
+      invalidate = false,
+      showValidationIcon = true,
+    }) {
       const valid = this._isValid(value)
       if (this.modified) {
         this.validationError = inputValidations[this.validation].validationError
@@ -121,7 +129,10 @@ export default {
       } else if (invalidate) {
         this.showError = true
       }
-      this.showValid = this.value != '' && valid
+
+      if (showValidationIcon) {
+        this.showValid = this.value != '' && valid
+      }
 
       // Emit a change event
       emitEvent('field-change', this, {

templates/components/text_input.html

@@ -17,7 +17,8 @@
   optional=True,
   showLabel=True,
   watch=False,
-  show_validation=True) -%}
+  show_validation=True,
+  inset_form=False) -%}
 
   <textinput
     v-cloak
@@ -28,6 +29,7 @@
     {% if initial_value or field.data is not none %}initial-value='{{ initial_value or field.data }}'{% endif %}
     {% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
     v-bind:optional={{ optional|lower }}
+    v-bind:inset-form={{ inset_form|lower }}
     key='{{ field.name }}'
     :watch='{{ watch | string | lower }}'
     inline-template>

templates/portfolios/admin.html

@@ -17,7 +17,7 @@
               {{ portfolio_form.csrf_token }}
               <div class='form-row'>
                 <div class='form-col form-col--half'>
-                  {{ TextInput(portfolio_form.name, validation="portfolioName") }}
+                  {{ TextInput(portfolio_form.name, validation="portfolioName", inset_form=True) }}
                 </div>
                 <div class='edit-portfolio-name action-group'>
                   {{ SaveButton(text='Save', additional_classes='usa-button-big') }}

templates/portfolios/applications/settings.html

@@ -25,8 +25,8 @@
             </p>
             <div class="form-row">
               <div class="form-col form-col--two-thirds">
-                {{ TextInput(application_form.name) }}
-                {{ TextInput(application_form.description, paragraph=True) }}
+                {{ TextInput(application_form.name, inset_form=True) }}
+                {{ TextInput(application_form.description, paragraph=True, inset_form=True) }}
               </div>
               <div class="form-col form-col--third">
                 {% if user_can(permissions.DELETE_APPLICATION) %}