How to submit a form in Angular2 without reloading the page

I have a straightforward form to transmit data to my component without refreshing the page.

I've tried to override the submit function by using "return false," but it doesn't work as expected, and the page still refreshes.

Here is the HTML:

        <form id="ngForm" [formGroup]="nameForm" (submit)="onSumbit()">
        <div style="padding-bottom:10px;padding-top:10px;">
            <label>Name</label>
        </div>
        <input required  formControlName="name"></input>
        <div style="float:right; padding-top:2cm">
                <button form="ngForm">Search</button>
        </div>
        </form>      

And here is the TypeScript:

onSubmit() {
    let user: UserInfo;

    user.name = 'test';
}

Answer №1

Make sure to include a "type" parameter in your button element:

<button type="submit" form="searchForm">Submit</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you explain the concept of being "well-typed" in TypeScript?

The website linked below discusses the compatibility of TypeScript 2.9 with well-defined JSON. What exactly does "well-typed" JSON mean? As far as I understand, JSON supports 6 valid data types: string, number, object, array, boolean, and null. Therefore, ...

Exploring the (*ngFor) Directive to Iterate Through an [object Object]

Attempting to iterate through the array using *ngFor as shown below. let geographicalArea = [{ "_id": "5e77f43e48348935b4571fa7", "name": "Latin America", "employee": { "_id": "5e77c50c4476e734d8b30dc6", "name": "Thomas", ...

How can I identify the nearest ancestor based on a specific class in Angular 8?

In order to achieve a specific goal, let's imagine this scenario: Object A Object B Object C Object D Object D represents my angular component. It is important for me to adjust its height based on the heights of Object A and Object B. Regardle ...

Collaborating with multiple forms and files in PHP using jQuery and AJAX operations

Need help with the title for this question. There are two input fields and buttons in index.php <form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST"> <input type="text" class="for ...

Issue with Angular Routing When Deployed

After developing a website utilizing Angular 6 and hosting it on GitHub, I incorporated Routing to automatically direct users to the '/home' page instead of the main '/' page. You can access the project by clicking on this project link. ...

Verification for collaborative element

I am currently working on creating a shared component for file uploads that can be reused whenever necessary. Interestingly, when I include the file upload code in the same HTML as the form, the validation functions properly. However, if I extract it into ...

Angular 13: SyntaxError Encountered: Token 'export' Not Recognized

After upgrading Angular from version 12 to 13, I encountered an error when running the app: "Uncaught SyntaxError: Unexpected token 'export'." Here are some additional details for context: In the angular.json configuration file, I had specified ...

Retrieve the stored information from a variable

Can anyone help me with a coding issue I'm facing? I have a constant called data, which contains two values - prediction and probability. What is the best way to access and retrieve both values? type ML = { prediction: string; probability: num ...

The function that iterates through the 'categoria' state and returns a new array is not functioning properly

Having difficulty with the object of a function using .map(). It works when the code is used directly, but not when put inside a function. For example: if(this.state.cat){ return _.map(this.state.cat, categoria => { if(this.state.search_ ...

Sending emails through a basic HTML/PHP form is incredibly time-consuming

Seeking assistance with optimizing my email form that utilizes the POST function alongside a PHP mailto() feature. The process of sending the form takes significantly longer than expected. Any suggestions or guidance would be greatly appreciated. Here&apo ...

Encountering problem with React Typescript fetching data from Spring Data REST API: the error message "Property '_embedded' does not exist" is being displayed

I am currently working on a React application that utilizes Typescript to fetch data from a Spring Data REST API (JPA repositories). When I make a specific request like "GET http://localhost:8080/notifications/1" with an ID, my JSON response does not pose ...

What is the method for adding pages to the ion-nav component in Ionic with Angular?

How can I implement a UINavigationController-like functionality in iOS using an ion-nav element? The example provided here is in Javascript, but I need assistance with implementing it in Angular. Specifically, I'm unsure of how to programmatically add ...

The Clarity Design side menu becomes unscrollable when the content is too long for the view

Currently, I am facing an issue with the sidenav where the navigation links go beyond the view and I am unable to scroll to see the "hidden" links unless I zoom out. My frontend framework is Angular 5 and this is how I organized the components: <nav c ...

Error: In Angular and Typescript, the function this.$resource is not recognized

I keep encountering a TypeError: this.$resource is not a function. Below is the code snippet causing the issue: export class DataAccessService implements IDataAccessService { static $inject = ["$resource"]; constructor(private $resource: ng ...

Implementing Form Validation in Angular 5 and showing errors in a reusable component

My current setup includes a generic component structured as follows: // selector: 'app-text-box' <form> <input type="text" [name]="data.name" [id]="data.name"/> </form> <error-message [message]="message"></ ...

Angular 16 HttpClient post request with asynchronous action

Here I am working on integrating JWT in Angular with a .Net Core API. When I start my Angular server and launch the application, I encounter the following scenarios: Attempting with correct credentials initially fails, but retrying allows it to work. Tryi ...

npm encountered an abrupt conclusion of JSON input during parsing near "serify":"latest","cha"

After uninstalling angular-cli yesterday to update to @angular/cli, I encountered an error while trying to install @angular/cli: Received an unexpected end of JSON input while parsing near '...serify":"latest","cha' Even after attempting to c ...

Encountering an issue with TypeScript error code TS2322 when trying to assign a className to the @

Encountering a typescript error when trying to apply a className to a Box element. Interestingly, the same code works on other developers' machines with almost identical configurations. Current dependencies: "@material-ui/core": "4.11. ...

When data is submitted through the POST method, it mysteriously disappears

When I send the "user" variable to another page called Survey.php, here's how it looks: In the index.html file: <form action="Survey.php" method="post" name="frm"> <div><input type="text" name= ...

What is the best way to configure eslint or implement tslint and prettier for typescript?

In my React/Redux project, I recently started integrating TypeScript into my workflow. The eslint configuration for the project is set up to extend the airbnb eslint configurations. Here's a snippet of my current eslint setup: module.exports = { // ...