how to use Custom input event primeng angular

I have an angular 16 project
I have a number input, which is validated using formControls
Because we use this input a lot, I have put it in a custom component to make my work easier.

I use primeng inputNumbers

The summary of my custom-input-number code is as follows

html file :

<span class="p-float-label w-100" [formGroup]="form">
  <p-inputNumber
    formControlName="number"
    [disabled]="disabled"
    (onInput)="onChange($event)"
    (onBlur)="onTouched()">
  </p-inputNumber>
  <label for="{{ id }}" class="custom-input-label">{{ label }}</label>
</span>

<small class="unselectable">
  {{textValidators}}
</small>

typescript file :

import { ChangeDetectorRef, Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
import { AbstractControl, ControlValueAccessor, FormControl, FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors } from '@angular/forms';

@Component({
  selector: 'ngx-custom-input-number',
  templateUrl: './custom-input-number.component.html',
  styleUrls: ['./custom-input-number.component.scss'],
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => CustomInputNumberComponent),
      multi: true,
    },
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputNumberComponent),
      multi: true,
    },
  ],
})
export class CustomInputNumberComponent implements OnInit, ControlValueAccessor {

  form: FormGroup;
  ngModel;
  selectedData = null;
  selectedCountry;
  getValidators;
  textValidators: string = '';

  @Input() mode;
  @Input() label;

  onChange!: (value: string) => void;
  @Output() onBlur = new EventEmitter();

  constructor(private cdr: ChangeDetectorRef) {
    this.ngModel = this.setNgModel;
  }

  ngOnInit(): void {
    this.form = new FormGroup({
      number: new FormControl(this.setDefaultValue),
    });
  }

  onTouched() {
    this.onBlur.emit(this.form.get('number').value)
  }


  writeValue(val: any): void {
    if (val) {
      this.form.get('number').setValue(val, { emitEvent: false });
    } else {
      this.form.get('number').setValue(null);
    }
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
    this.form.get("number").valueChanges.subscribe(fn);
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState?(isDisabled: boolean): void {
    isDisabled
      ? this.form.disable()
      : this.form.enable();
  }

  validate(c: AbstractControl): ValidationErrors | null {...}

}

When I want to use this in another component, it is completely normal
I use it and give it formControlName
like this

  <form [formGroup]="form"
    <ngx-custom-input-number [label]="..." formControlName="number"> </ngx-custom-input-number>
  </form>

Now exactly my problem is when the input value goes to the server That
everything will be ruined The amount that goes to the server

number : {
    formattedValue : '423',
    originalEvent : { isTrusted : true},
    value : 4234
  }

I only want this value and not other things
And my problem is that I can’t change the whole project
I want to change the custom-component as much as possible so that the whole project doesn’t need to be changed

Note: I upgraded the project from angular12 to angular16 and this
problem was not present in angular12