[Bug]: goa-button with 'type="submit"' does not render a button of 'type="submit"'
Closed this issue · 0 comments
tchan101 commented
Describe the bug
Using <goa-button type="submit">
does not render a <button type="submit">
in the shadow-root. It is a regular button. When using this type of goa-button with a form, the form doesn't get submitted when the button is clicked.
Provide Code
import 'zone.js/dist/zone';
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication, BrowserModule } from '@angular/platform-browser';
import { AngularComponentsModule } from '@abgov/angular-components';
import '@abgov/web-components';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'my-app',
standalone: true,
imports: [CommonModule, AngularComponentsModule, FormsModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
template: `
<h1>Test Form</h1>
<form #formData="ngForm" (ngSubmit)="onSubmit(formData.value)">
<div class="form-group">
<div for="name">Name</div>
<input type="text" class="form-control" id="name" name="name" ngModel>
</div>
<goa-button
type="submit"
>Submit</goa-button>
<!-- <button type="submit">Submit</button> -->
<form>
`,
})
export class App {
onSubmit(data: any) {
alert(`Hello ${data.name}`);
}
}
bootstrapApplication(App);
To Reproduce
- Fill out the form.
- Click the submit button.
Expected result:
An alert that shows "Hello ", where name is the value you entered in the form.
Actual result:
Nothing happens
Additional context
I also included a basic submit button that can be switched out. Clicking on it gives the expected result.