diff --git a/atst/forms/officers.py b/atst/forms/officers.py
index 84e2283a..4df1f5a7 100644
--- a/atst/forms/officers.py
+++ b/atst/forms/officers.py
@@ -1,11 +1,12 @@
 from flask_wtf import FlaskForm
-from wtforms.fields import FormField, StringField
+from wtforms.fields import StringField
 from wtforms.fields.html5 import TelField
 from wtforms.validators import Length, Optional
 
 from atst.forms.validators import IsNumber, PhoneNumber
 
 from .forms import CacheableForm
+from .fields import FormFieldWrapper
 
 
 class OfficerForm(FlaskForm):
@@ -18,9 +19,9 @@ class OfficerForm(FlaskForm):
 
 class EditTaskOrderOfficersForm(CacheableForm):
 
-    contracting_officer = FormField(OfficerForm)
-    contracting_officer_representative = FormField(OfficerForm)
-    security_officer = FormField(OfficerForm)
+    contracting_officer = FormFieldWrapper(OfficerForm)
+    contracting_officer_representative = FormFieldWrapper(OfficerForm)
+    security_officer = FormFieldWrapper(OfficerForm)
 
     OFFICER_PREFIXES = {
         "contracting_officer": "ko",
diff --git a/js/components/forms/__tests__/edit_officer_form.test.js b/js/components/forms/__tests__/edit_officer_form.test.js
index b5b02aa2..18f36ffc 100644
--- a/js/components/forms/__tests__/edit_officer_form.test.js
+++ b/js/components/forms/__tests__/edit_officer_form.test.js
@@ -22,6 +22,13 @@ describe('EditOfficerForm', () => {
     expect(wrapper.vm.$data.editing).toEqual(true)
   })
 
+  it('does start in editing mode when the form has changes', () => {
+    const wrapper = shallowMount(EditOfficerForm, {
+      propsData: { hasChanges: true },
+    })
+    expect(wrapper.vm.$data.editing).toEqual(true)
+  })
+
   it('starts editing when edit method called', () => {
     const wrapper = shallowMount(EditOfficerForm)
     wrapper.vm.edit({ preventDefault: () => null })
diff --git a/js/components/forms/edit_officer_form.js b/js/components/forms/edit_officer_form.js
index a8e4311b..016187bc 100644
--- a/js/components/forms/edit_officer_form.js
+++ b/js/components/forms/edit_officer_form.js
@@ -13,6 +13,10 @@ export default {
   },
 
   props: {
+    hasChanges: {
+      type: Boolean,
+      default: () => false,
+    },
     hasErrors: {
       type: Boolean,
       default: () => false,
@@ -21,7 +25,7 @@ export default {
 
   data: function() {
     return {
-      editing: this.hasErrors,
+      editing: this.hasErrors || this.hasChanges,
     }
   },
 
diff --git a/templates/portfolios/task_orders/invitations.html b/templates/portfolios/task_orders/invitations.html
index 7fda4f2d..3abc03e7 100644
--- a/templates/portfolios/task_orders/invitations.html
+++ b/templates/portfolios/task_orders/invitations.html
@@ -56,7 +56,7 @@
     <h2 class="officer__title">{{ ("task_orders.invitations." + officer_type + ".title") | translate }}</h2>
     <p class="officer__description">{{ ("task_orders.invitations." + officer_type + ".description") | translate }}</p>
 
-    <edit-officer-form v-bind:has-errors='{{ ((form.errors|length) > 0)|tojson }}' inline-template>
+    <edit-officer-form v-bind:has-errors='{{ ((form.errors|length) > 0)|tojson }}' v-bind:has-changes='{{ form.has_changes() | tojson }}' inline-template>
       <div>
 
       {% set prefix = { "contracting_officer": "ko", "contracting_officer_representative": "cor", "security_officer": "so" }[officer_type] %}