Documentation on creating dynamic forms doesn't specify a type for the button that adds an alias control

Description

The example HTML code given in the Reactive forms documentation, chapter Creating dynamic forms lacks a button type for:

<button (click)="addAlias()">+ Add another alias</button>

This, in result, makes it a submit button as it is placed inside a form.

Updating the documentation to use:

<button type="button" (click)="addAlias()">+ Add another alias</button>

would prevent people from facing the issue of unwanted form submits and make the example code copied from the official documentation work out of the box.

It would also make searching out issues on Stack Overflow like (ngSubmit) is called when press ‘click’ button unnecessary to make the documented example work properly.

I could provide a PR for this but I’m not sure if the profile-editor.component.html file is the right one to change.

What is the affected URL?

https://angular.io/guide/reactive-forms#creating-dynamic-forms

Please provide the steps to reproduce the issue

For reproducing the issue we can use the profile-editor.component.html from the Reactive Forms live-example.

1. Click the Profile editor button.
2. Make the Console visible.
3. Click + Add another alias button.
4. The onSubmit() function from the profile-editor.component.ts is called and the form values are logged in the Console.

Please provide the expected behavior vs the actual behavior you encountered

Expected behaviour would be for the + Add another alias button to ONLY add another form control - instead of adding another form control AND submitting the form.

Please provide a screenshot if possible

The screenshot from the live example:

The code snippet from the docs:

Please provide the exception or error you saw

No response

Is this a browser-specific issue? If so, please specify the device, browser, and version.

No response

[little-pinecone]

Thanks for the instructions! I will try to run the documentation and propose a Pull Request in the coming days.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}