Require defense component input before showing Save button

js/components/options_input.js

@@ -17,6 +17,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    optional: Boolean
+  },
+
+  created: function() {
+    emitEvent('field-mount', this, {
+      optional: this.optional,
+      name: this.name,
+    })
   },
 
   data: function() {
@@ -31,13 +39,15 @@ export default {
 
   methods: {
     onInput: function(e) {
+      this.showError = false
+      this.showValid = true
+
       emitEvent('field-change', this, {
         value: e.target.value,
         name: this.name,
         watch: this.watch,
+        valid: this.showValid
       })
-      this.showError = false
-      this.showValid = true
     },
   },
 }

js/mixins/form.js

@@ -15,7 +15,6 @@ export default {
     handleFieldChange: function(event) {
       const { value, name, valid, parent_uid, watch } = event
       if (typeof this.fields[name] !== undefined) {
-        this[name] = value
         this.fields[name] = valid
         if (parent_uid === this._uid || watch) {
           this.changed = true

templates/components/options_input.html

@@ -1,7 +1,7 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/tooltip.html" import Tooltip %}
 
-{% macro OptionsInput(field, tooltip, inline=False, label=True, disabled=False, watch=False) -%}
+{% macro OptionsInput(field, tooltip, inline=False, label=True, disabled=False, watch=False, optional=True) -%}
   <optionsinput
     name='{{ field.name }}'
     inline-template
@@ -9,6 +9,7 @@
     {% if field.data and field.data != "None" %}v-bind:initial-value="'{{ field.data }}'"{% endif %}
     key='{{ field.name }}'
     v-bind:watch='{{ watch | string | lower }}'
+    v-bind:optional={{ optional|lower }}
     >
     <div
       v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">

templates/portfolios/new.html

@@ -14,7 +14,7 @@
       {{ form.csrf_token }}
 
       {{ TextInput(form.name) }}
-      {{ OptionsInput(form.defense_component) }}
+      {{ OptionsInput(form.defense_component, optional=False) }}
       {{ TextInput(form.description, paragraph=True) }}
 
       <h3 id="reporting" class="subheading">{{ "task_orders.new.app_info.project_title" | translate }}</h3>