Skip to content

Html form method=dialog functionality stops working when a formsModule is loaded. #47150

@SanderElias

Description

@SanderElias

Which @angular/* package(s) are the source of the bug?

forms

Is this a regression?

No

Description

When a formsModule is loaded, the folowing code no longer conforms to the W3C specs.

<dialog #dlg (close)="handleClose($event)">
  <form method="dialog" name="myForm">
      <label>
        <span>Last:</span>
        <input type="text" name="name.last" />
      </label>
      <button value="reset">Cancel</button>
      <button value="submit">Confirm</button>
   </form>
</dialog>

Clicking the submit button should close the dialog and raise an event. You can see this working in the attached StackBlitz.
The App-component works, while the forms-component doesn't fire the event.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-ivy-anbk9o?file=src%2Fapp%2Fforms%2Fforms.component.html,src%2Fmain.ts,src%2Fstyles.css,package.json,src%2Fapp%2Fforms%2Fforms.component.ts,src%2Fapp%2Ftop.component.ts,src%2Fapp%2Fapp.component.html

Please provide the exception or error you saw

The dialog doesn't close, and the corresponding event is not fired.

Please provide the environment you discovered this bug in (run ng version)

All angular versions. In the StackBlitz is version 14.1.2

Anything else?

cc @twerske You asked me to tag you here

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions