The Angular reactive form is being submitted without completing the submission process

I've been working on an Angular 5 reactive form and everything seems to be functioning correctly. However, I've encountered a strange issue with a button used to close the form by hiding it from view.

Whenever I click on this close button, the form is being submitted as if I had clicked the submit button. I've even removed the (click) event from the close button, but the form still submits as though it were a submit button. What could be causing this unexpected behavior?

<div [hidden]="add_status!='active'">

<form novalidate (ngSubmit)="custom_submit(form.value)" 
                      [formGroup]="form">

             <button type="submit">Save</button>
             <button (click)="change_add_status()">Close</button>

             <input name="1">
             <input name="2">
             <input name="3">
             <input name="..and so on">

          </form>
           </div>

Answer №1

To ensure the close button functions correctly, consider setting its type attribute to "button." If the button is located within a form, keep in mind that some browsers may interpret it as a confirmation 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

Discover the power of Angular 4 with its *ngFor loop constraints, and enhance user interaction

<ul> <li *ngFor="let hero of heroes | slice:0:10;"> {{ hero.name }} </li> </ul> <p *ngIf="heroes.length > 10" (click)="showMore()">show more 10</p> I am looking to display additional hero names when clic ...

How to use Typescript to find the length of an array consisting of either strings or

I am trying to determine the length of a string or array, stored in a variable with the data type var stepData : string | string[]. Sometimes I receive a single string value, and other times I may receive an array of strings. I need the length of the array ...

Tips for inputting transition properties in Material UI Popper

Currently, I am making use of material ui popper and I would like to extract the transition into a separate function as illustrated below: import React from 'react'; import { makeStyles, Theme, createStyles } from '@material-ui/core/styles& ...

Unable to retrieve base64 pdf file due to network connectivity problem

I am trying to download a base64 pdf file from local storage using vue3 typescript. Here is the code snippet I'm using: downloadPDF() { const linkSource = `data:application/pdf;base64,${'json.base64'}`; const downloadLink = ...

Leveraging Inversify for implementing a Multiinject functionality for a class with both constant and injected parameters

In my Typescript code, I have an insuranceController class that takes a multi inject parameter: @injectable() export class InsuranceController implements IInsuranceController { private policies: IInsurancePolicy[]; constructor(@multiInject("IInsu ...

When there are multiple tabs open in the browser, I notice a difference in the time displayed. This occurs in an Angular 2 environment

https://i.sstatic.net/l4YQ1.pngAfter a successful login, I am fetching server time from the back-end (in Java) and adding 1 second at intervals. Observable.interval(1000).map(() => { return this.time.add(1, 'seconds'); }). ...

Change an array of objects into a map where each object is indexed by a unique key

I'm attempting to transform an array of objects into a map, with the index based on a specific attribute value of the object in typescript 4.1.5 Additionally, I am only interested in attributes of a certain type (in this case, string) A similar ques ...

Using JavaScript to dynamically calculate the sum of selected column values in Angular Datatables

I have a table set up where, if a checkbox is checked, the amounts are automatically summed and displayed at the top. However, I am encountering issues with the code below as it is not providing the exact sum values. Can anyone suggest a solution to this p ...

Creating Algorithms for Generic Interfaces in TypeScript to Make them Compatible with Derived Generic Classes

Consider the (simplified) code: interface GenericInterface<T> { value: T } function genericIdentity<T>(instance : GenericInterface<T>) : GenericInterface<T> { return instance; } class GenericImplementingClass<T> implemen ...

Warning: Typescript is unable to locate the specified module, which may result

When it comes to importing an Icon, the following code is what I am currently using: import Icon from "!svg-react-loader?name=Icon!../images/svg/item-thumbnail.svg" When working in Visual Studio Code 1.25.1, a warning from tslint appears: [ts] Cannot ...

Strategies for Implementing Pagination in an Angular 2 HTML Table Without the Use of Third-Party Tools

I have an HTML table that displays basic details along with images. I am looking to implement pagination for this table in Angular 2. Are there any alternatives to using ng2-pagination? ...

Coverage of code in Angular2 using Qunit

Is there a reliable code coverage measurement tool or framework that can easily be integrated to assess the code coverage of Angular2-TypeScript code with QUnit tests? I have come across some frameworks like remap-istanbul, blanket.js etc., but these fram ...

Transform array of elements from type T1 to element in the array to type T2

Here is a Typescript class I am working with: export class Envelope<T> { result: T; constructor(result: T) { this.result = result; } } I'm trying to convert Envelope<RecentPostResponse[]> to Observable<PostModel[]>: getP ...

Importing TypeScript Modules from a Custom Path without Using Relative Paths

If we consider the following directory structure: - functions - functionOne - tsconfig.json - index.ts - package.json - node_modules - layers - layerOne - tsonfig.json - index.ts - index.js (compiled index.ts ...

The resolve.alias feature in webpack is not working properly for third-party modules

Currently, I am facing an issue trying to integrate npm's ng2-prism with angular2-seed. The problem arises when importing angular2/http, which has recently been moved under @angular. Even though I expected webpack's configuration aliases to hand ...

What is the most efficient approach to handle the next state after calling setState in react with immer?

Using Typescript, React, and Immer, I have set up a state management system to save profiles with multiple options. My goal is to ensure that the active profile has the correct option data before saving it. const { updateProfileList, getProfile } = useProf ...

Difficulty in Configuring Form Attributes Using Crispy Forms Manually

I have been working on creating a model form using django-crispy-forms for Django 1.8.4 and django-crispy-forms-1.5.2. I am facing some challenges in modifying the form tag attributes. Even after trying to set self.helper.form_tag = False, the <form> ...

Issue with recognizing global methods in Vue and Typescript – help needed

I have a Vue mixin that looks like this: const languageMixin = Vue.extend({ methods: { $getLanguages: function(): object { return { en: 'english' } } } } Vue.mixin(languageMixin) ...

The inconsistency in the execution of Angular 2 functions is causing unexpected behavior

Angular Component: import { Component, OnInit } from '@angular/core'; import { AF } from "../angularfire.service"; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.co ...

A guide on converting JSON to TypeScript objects while including calculated properties

I have a standard JSON service that returns data in a specific format. An example of the returned body looks like this: [{ x: 3, y: 5 }] I am looking to convert this data into instances of a customized TypeScript class called CustomClass: export class ...