Vaadin Button in Forms

General
1

Hello! I am using Vaadin components in TypeScript and I have found myself in the following situation, I have a form and the button does not submit it, I assume that the Button component internally does not have the type property. Is there any way to make it work?

<form action="/api/auth/sign-in" method="post">
  <vaadin-email-field name="email" label="Email Address"></vaadin-email-field>
  <vaadin-password-field name="password" label="Password"></vaadin-password-field>
  <vaadin-button type='submit' theme="primary">Login</vaadin-button>
</form>
2

Hello! You could submit the form programmatically on button click:

<script>
  const form = document.querySelector('form');
  const button = form.querySelector('vaadin-button');
  button.addEventListener('click', () => form.submit());
</script>
1 Like
3

Thanks for the answer @virkki
I have other use case, here i need to send the implicit formData, but name and value are undefined because Button don’t have those properties. In the future, it would be a good idea for the team to consider adding those properties to the component.

<form action="/api/auth/sign-in" method="post" id="socialSignIn" >
	<vaadin-button
		@click=${handleSocialSignIn}
		name="provider"
		value="google"
		aria-label="Sign in with Google">
		<vaadin-icon src="/google.svg"></vaadin-icon>
	</vaadin-button>
	<vaadin-button
		@click=${handleSocialSignIn} 
		name="provider"
		value="github"
		aria-label="Sign in with Github">
		<vaadin-icon src="/github.svg"></vaadin-icon>
	</vaadin-button>
</form>

For now I have solved it by adding a hidden input to make use of its properties

const form = document.querySelector("#socialSignIn")
const handleSocialSignIn = (event: MouseEvent) => {
	if (form instanceof HTMLFormElement) {
		const vaadinButton = event.currentTarget as Button
		const name = vaadinButton.getAttribute("name") as string
		const value = vaadinButton.getAttribute("value") as string
		const input = document.createElement("input")
		input.type = "hidden"
		input.name = name
		input.value = value
		form.appendChild(input)
		form.submit()
	}
}