Button click event submits the quantity

This question is related to another question that I asked recently at the forum. I had to start a new post because my question evolved over time and my original question wasn’t valid any more. I narrowed down my problem to the quantity buttons submitting every time they’re clicked so I am only showing my quantity button code. What I want to find out is how can I get the buttons to only submit when the submit button is clicked. Right now they console log ‘click submitted’ every time they are clicked.

The HTML

<button class="minus-btn" (click)="minus(product)" type="button" name="btn" onclick="return false;">
<img src="../assets/images/minus.svg" alt="minus" /></button>
<input class="num" name="int" [value]="product.nullValue" formControlName="int" ng-minlength="0" type="number" required />
<button class="plus-btn" (click)="plus($event, product)" name="btn" type="button" onclick="return false;">
<img src="../assets/images/plus.svg" alt="plus" /></button>

and in the controller:

plus($event, product:any) {
  $event.preventDefault();
  product.nullValue++;
  this.quantity = product.nullValue;
  console.log('click submitted');
  return false;  
  return this.quantity;
 
}

minus(product:any){ 
 product.nullValue--;
  this.quantity = product.nullValue;
  console.log('click submitted'); 
  return false;
  return this.quantity;

}

Does the plus button sunmit, or just the minus?

$event.preventDefault() at the top of of your plus function should stop it from submitting, but you don’t have that on your minus.

Both of the buttons submit.

Oh, hang on - you have (click) as the attribute you are assigning the functions to. They should be assigned to onclick. The click in parentheses is not valid syntax.

Thanks Jackson but when I added onclick to the plus button, the quantity no longer incremented upon clicking.

Do you have an online version of this I can test?

Hello!

Just by adding the type="button" attribute should make it work, so there should be another problem.

Can you add brackets to the formControlName attribute and see what happens?

[formControlName]="theName"

Plus, remove the name attribute of the buttons or use unique names on each.

No, I can’t use, for example, stackblitz because I have a bunch of modules that aren’t provided there. (click) is the proper syntax for angular and this is angular code not vanilla javascript.

Ah! I didn’t realise it was angular.

Maybe you just need to remove he onclick entirely then, since that might be triggering the submit. Or add a preventDefault to the onclick handler to prevent submitting?

But I rarely touch angular, so it’s conventions are a bit beyond me.

Hi skaparate, when I add the square brackets to the formControlName I get the following error:

Property ‘int’ does not exist on type ‘ShoppingCartComponent’.
[formControlName]=“int”

That’s because you’re mixing the Template-drive forms with Reactive Forms :slight_smile:. I believe the problem lies here.

Please, review the documentation and try to fix it, since without having the entire project or part of the code we’re testing is hard to help :slight_smile:.

I setup this project to test it, and seems to be working with a simple form, though I don’t have the entire context to test: https://stackblitz.com/edit/makamo66-cart

Thanks skaparate. I will review the documentation tomorrow.

I am using reactive forms and except for the name attribute not being necessary, I don’t see where I am using code for the template-driven approach.