Angular 7 FormControl cast input from number to string - forms

Question

I have a FormGroup where I defined a FormControl used this way:
myForm: FormGroup = new FormGroup({
...
code: new FormControl('', Validators.pattern('^[0-9]*$')),
...
});
html:
<mat-form-field class="col">
<input formControlName="code" matInput>
</mat-form-field>
I want this input to be a number, but I can't cast it correctly. I've registered to the vauleChanges event of the form control and did this:
this.myForm.controls['code'].valueChanges.subscribe(d => {
if(this.myForm.controls['code'].valid){
this.myForm.get('code').setValue( +this.myForm.controls['code'].value);
}
})
I've also tried using as number or <number> to cast the value, but if I print the value of my form I get it printed as a string and not a number.
Also, my input shows 0 as default when I load the page:
but I didn't set 0 anywhere and I don't want it to be showing.
I've tried specifying the input type as number, but it shows the arrows and I don't want them to show.
What is the correct way to implement this? I'm a lot confused.

Answer 1

SOLUTION:
You could simply check for changes in model (ngModelChange)="validate()" check for validate() method.
HTML FILE:
<input id="code" class="form-control" [(ngModel)]="code" required (ngModelChange)="validate()">
<div *ngIf="codeValidator.invalid" class="alert alert-danger">
<div *ngIf="codeValidator.errors.required">
Field must not be empty.
</div>
<div *ngIf="codeValidator.errors.pattern">
Only numeric values are allowed.
</div>
</div>
<input type="text" [(ngModel)]="numberValue">
TS FILE:
code = 0;
codeValidator: any = {};
numberValue: any;
validate() {
console.log("Validating");
this.codeValidator = new FormControl(this.code, [
Validators.required,
Validators.pattern('^[0-9]*$')
]);
// You could simply use isNaN
this.numberValue = isNaN(this.code) || this.code === 0 ? '' : +this.code;
}