Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Component Name: Form #6774

Open
martin-obert opened this issue Nov 13, 2024 · 3 comments
Open

Component Name: Form #6774

martin-obert opened this issue Nov 13, 2024 · 3 comments
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@martin-obert
Copy link

martin-obert commented Nov 13, 2024

Bug description

Submiting form doesn't pass values in the event as described at your official docu https://primevue.org/forms/
Trying any official example via stackblitz yields same result:
Submit example on your official site

const onFormSubmit = ({ valid, values }) => {
  console.log(values); /// <-- values are undefined

  if (valid) {
    toast.add({
      severity: 'success',
      summary: 'Form is submitted.',
      life: 3000,
    });
  }
};

Am I missing something? How do I get the actual submitted data?

Reproducer

https://stackblitz.com/edit/kcnxrq?file=src%2FApp.vue

PrimeVue version

4.2.1

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

Chrome 90

Steps to reproduce the behavior

Click on Submit button and observe the browser console

Expected behavior

text from input field should appear in the console output

@martin-obert martin-obert added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Nov 13, 2024
@raizdev
Copy link

raizdev commented Nov 13, 2024

Schema is required...

@martin-obert
Copy link
Author

I've looked up for schema in the docs, but without luck. Can you please provide more details, what schema are you referencing to. Any code example?

@Tjattex0
Copy link

Tjattex0 commented Nov 14, 2024

Hello @martin-obert,

if you need to access values in the onFormSubmit method, ensure that your resolver returns both the values and errors, like this:

const resolver = ({ values }) => {
  const errors = {};

  if (!values.username) {
    errors.username = [{ message: 'Username is required.' }];
  }

  return {
    errors,
    values
  };
};

During form submission, the resolver first validates the form. A callback is then triggered, providing information about the form's current state (see the Form Submit section here). This callback is partially composed of the resolver’s return values and errors.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

3 participants