Angular: inputNumber with primeng doesn't work. It keeps like disabled

I want to use in my project but for some reason the component isn't working. It shows like "hey I'm here"



But I can´t select, write nor focus the component. I tried changing several things event creating a component solely with the form and field, but it just doesn't work.

I DO NOT HAVE DISABLED ANY PART OF THE CODE THE INPUT. In fact changing to a works. But I want to use pInputNumber

My sample code is the following:

<form [formGroup]="myForm" class="mb-4">
<div class="row col-md-12">
<div class="col-sm-12 col-md-6">
<p-inputNumber id="attribute-quantity-input" class="form-control" formControlName="quantity"
placeholder="required" [maxFractionDigits]="2" [minFractionDigits]="2" [disabled]="false">
</p-inputNumber>
</div>
</div>
</form>


import { ButtonModule } from "primeng/button";
import { DropdownModule } from "primeng/dropdown";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { InputTextModule } from "primeng/inputtext";
import { InputNumberModule } from "primeng/inputnumber";
import { MultiSelectModule } from "primeng/multiselect";
import { NgForOf } from "@angular/common";
import { NgModule } from "@angular/core";

import { TooltipModule } from "primeng/tooltip";
import { FormComponent } from "./form.component"

@NgModule({
imports: [ButtonModule, TooltipModule, FormsModule, InputTextModule,
DropdownModule, MultiSelectModule, ReactiveFormsModule, BaseFormWrapperModule,
NgForOf, InputNumberModule
],
declarations: [FormComponent],
exports: [FormComponent]
})
export class FormModule { }


import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";


import { CONSTANTS } from "../../../../shared/constants";
import { FormUtils, NumberUtils } from "../../../../utils/utils";
import { FormValidator } from "../../../../shared/custom-validators/form.validators";
import { LabelService } from "../../../../administration/label-management/label.service";
import { PickingUnit } from "../picking-units.model";
import { ScfToastrService } from "scf-library";
import { UOM } from "../../../../catalog/uom/uom";
import { UOMService } from "../../../../catalog/uom/uom.service";
import { WepError } from "../../../../shared/wep-error";

@Component({
selector: "app-form",
templateUrl: "form.component.html"
})
export class FormComponent implements OnInit {

private readonly MINIMUM_QUANTITY: number = 1;
private readonly MAXIMUM_QUANTITY: number = 1_000;

protected myForm: FormGroup;
private shipmentOrderId: number;
protected uomSelector: UOM[];
protected wip: boolean;

constructor(
private formBuilder: FormBuilder,
) {
this.initData();
}

/**
* @description Lifecycle hook in Angular that is called when the component is initialized.
* After the component is initialized:
* - Initializes the form builder
* @return {void}
*/
ngOnInit(): void {
this.initFormBuilder();
}


/**
* @description Initializes the form builder for registering a new picking unit.
* It also subscribes to value changes to validate the form and update form errors.
* @return {void}
*/
private initFormBuilder(): void {
this.pickingUnitForm = this.formBuilder.group({
quantity: new FormControl(null, [
Validators.required,
Validators.min(this.MINIMUM_QUANTITY),
Validators.max(this.MAXIMUM_QUANTITY)
])
});

this.pickingUnitForm.valueChanges.subscribe((data: { [key: string]: Object }) => {
this.formErrors = FormUtils.validateForm(this.pickingUnitForm, data, this.lbl.errors);
});
}
}


I'm using these versions for primeng.

"primeflex": "^3.2.1",
"primeicons": "^5.0.0",
"primeng": "^15.4.1"


I don't know if it could help but it renders like this in the DOM

<p-inputnumber id="attribute-quantity-input" formcontrolname="quantity" class="p-element p-inputwrapper form-control ng-untouched ng-pristine ng-invalid" ng-reflect-name="quantity" ng-reflect-placeholder="Requerido" ng-reflect-max-fraction-digits="2" ng-reflect-min-fraction-digits="2" ng-reflect-disabled="false" ng-reflect-is-disabled="false"><span ng-reflect-ng-class="[object Object]" class="p-inputnumber p-component"><input pinputtext="" inputmode="decimal" class="p-inputtext p-component p-element p-inputnumber-input" ng-reflect-ng-class="p-inputnumber-input" placeholder="required"><!--bindings={
"ng-reflect-ng-if": "false"
}--><!--bindings={
"ng-reflect-ng-if": "false"
}--><!--bindings={
"ng-reflect-ng-if": "false"
}--><!--bindings={
"ng-reflect-ng-if": "false"
}--></span></p-inputnumber>

Continue reading...