¿Por qué cuando cambio el input del precio con las flechas imprime el “console.log” 2 veces?

Este es el formulario

<form [formGroup]="form" (ngSubmit)="saveForm($event)">
            <div class="form-group">
                <input class="form-control" formControlName="id" type="text">
            </div>
            <div class="form-group">
                <input class="form-control" formControlName="title" type="text">
            </div>
            <div class="form-group">
                <input class="form-control" formControlName="price" type="number">              
                <p *ngIf="form.get('price').hasError('price_invalid')">El precio no debe ser mayor que 1000</p>
                <p *ngIf="form.get('price').hasError('required')">Este campo es requerido</p>
            </div>
            <div class="form-group">
                <input class="form-control" formControlName="description" type="text">
            </div>
            <div class="form-group">
                <button class="btn btn-primary" [disabled]="form.invalid">Guardar</button>
                <span *ngIf="form.invalid"> El formulario es inválido</span>
            </div>
        </form>

Su componente

constructor(
    private formBuilder: FormBuilder,
    private router: Router) {
    this.emailField = new FormControl('',
      [Validators.required, Validators.email])
    this.buildForm()  
  }

  private buildForm() {
    this.form = this.formBuilder.group({
      id: ['', [Validators.required]],
      title: ['', [Validators.required]],
      price: [0, [Validators.required, MyValidators.isPriceValid]],
      image: ['', []],
      description: ['', [Validators.required]]
    })
  }

Este es el validators.ts

import { AbstractControl } from "@angular/forms";

export class MyValidators {
    static isPriceValid(control: AbstractControl) {
        const value = control.value
        console.log(value);

        if (value > 1000) {
            return { price_invalid: true }
        } else {
            return true
        }
    }
}

El problema no es del botón de enviar (submit). A lo que me refiero es que el "input del precio" (que tiene type = "number") tiene unas flechas al lado para cambiar su valor. Cuando presiono en esas flechas, se ejecuta el archivo validators.ts 2 veces por cada click. Sin embargo, cuando cambio el contenido del input con el teclado se ejecuta solo 1 vez.

Hola! si como Danny, puede ser por tiene botones sin especificar qué acción cumplen.

recuerda si el botón no va a enviar la data el form deber ser

También puedes enviarnos el código que haces o a que input te refieres para ser más preciso en la respuesta.

Seguramente tienes en la etiqueta form el evento (submit) y el boton que hace el submit tienes el evento (click), para evitar esto solo deberias tener en el formulario el evento (submit) y quitar el evento (click) del boton que hara este submit… tambien valida que este boton tenga type=‘submit’