Form Helper should be able to change the initial value

[itsfaqih]

It would be useful for a form inside a modal that used for both create and edit form.
Here's what I mean:

As you can see from the disabled submit button, the isDirty property works as expected because the current value of the form is the exact same as its initial value.

But it'd be a problem when we use this form for the edit:

The submit button become enabled even though I haven't change anything, this is because the values aren't the same as its initial value which is an empty string.

So, I hope there's a way to change the form's initial value

[ajnsn]

@itsfaqih Try to initialize the form with it's default/initial data. Vue 3 Example:

const form = useForm({
  name: 'John Doe',
  email: '[email protected]',
})

When you set the values after initialization of the form, you will trigger the isDirty watcher.

[itsfaqih]

The problem is it can't change the form's initial data with passed props.

Parent.vue

<template>
  <div v-for="account in accounts">
    <!-- Showing data -->
    <button @click="edit(account)">Edit</button>
  </div>
  <modal-form :initial-values="editing" :open="isOpen"/>
</template>

<script>
  import ModalForm from './ModalForm';

  export default {
    components: {ModalForm},
    data() {
      return {
        editing: {},
        isOpen: false,
      };
    },
    methods: {
      edit(account) {
        this.isOpen = true;
        this.editing = account;
      }
    }
  }
</script>

ModalForm.vue

<template>
  <third-party-modal :open="open">
    <form @submit.prevent="submit">
      <input name="name" v-model="form.name" />
      <input name="email" type="email" v-model="form.email" />
      <button type="submit">Save</button>
    </form>
  </third-party-modal>
</template>

<script>
  import ThirdPartyModal from 'thirdpartymodal';

  export default {
    components: {ThirdPartyModal},
    props: ['initialValues', 'open'],
    data() {
      return {
        form: this.$inertia.form({
          name: this.initialValues.name, // this doesn't work
          email: this.initialValues.email, // this doesn't work either
        }),
      };
    },
  }
</script>

[ajnsn]

@itsfaqih Vue passes the empty {}-object to your child component when the parent component is mounted. Try to initialize the child component conditionally by using v-if on the modal-form, e.g.

<modal-form v-if="isOpen" :initial-values="editing" />

[reinink]

Yeah, so @claudiodekker and I talked about about adding a form.init() method, but in the end, we decided against it, since it's honestly easier to just setup a new form. In my app, all my modals have an open() method, which is where I do this. Something like this (this is Vue code, but you get the idea).

data() {
  return {
    show: false,
    form: {},
  }
},
methods: {
  open() {
    this.form = this.$inertia.form({
      name: this.user.name,
      email: this.user.email,
    })
    this.show = true
  },
  close() {
    this.show = false
  },
}

[itsfaqih]

Both solutions look pretty good, guess I don't really need to push this idea further since the issue was from my lack of understanding in using Vue.

Thank you all for responding 😄