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