Why component variables initialized via [(ngModel)] still have null values?

Question

I am working on an Angular application and I have the following problem.

Into a reactive form I have defined these two fields:

<div class="row">
  <div class="col-2">
    <p>Prezzo fattura</p>
  </div>
  <div class="col-10">
    <p-inputNumber id="invoice_cost" formControlName="invoice_cost"  [(ngModel)]="invoiceCostNg"
                   mode="currency" currency="EUR" locale="de-DE"
                   [disabled]="!isEditAssetDetails">
    </p-inputNumber>
      
  </div>
</div>

<div class="row">
  <div class="col-2">
    <p>Franchigia</p>
  </div>
  <div class="col-10">
    <p-inputNumber id="deductible" formControlName="deductible" [(ngModel)]="deductibleNg"
                   mode="currency" currency="EUR" locale="de-DE"
                   [disabled]="!isEditAssetDetails"
                   (onInput)="calculateDeprecation($event)">
    </p-inputNumber>                         
  </div>
</div>

As you can see both these form fields have [(ngModel)] linked to the following TypeScript component code variables invoiceCostNg and deductibleNg.

Into my TypeScript component code I have done something like this:

@Component({
  selector: 'app-asset-details',
  templateUrl: './asset-details.component.html',
  styleUrls: ['./asset-details.component.scss']
})
export class AssetDetailsComponent implements OnInit {

    ................................................................
    ................................................................
    ................................................................
    invoiceCostNg: number = null;
    deductibleNg: number = null;
    ................................................................
    ................................................................
    ................................................................
    
    public calculateDeprecation(value) {

        let startingValue = this.assetDetailsForm.value.invoice_cost;
        let deductible = this.assetDetailsForm.value.deductible;

        console.log("INVOICE COST: ", this.invoiceCostNg);
        console.log("DEDUCTIBLE: ", this.deductibleNg);
    }
}

As you can see changing the value into the second input field this it is called the calculateDeprecation() method that have to use both the this.invoiceCostNg and the this.deductibleNg fields (the ones bounded via the [(ngModel)] attribute).

The problem is that when this method is executed this is the obtained output into the Chrome console:

INVOICE COST:  null      asset-details.component.ts:432 
DEDUCTIBLE:    null      asset-details.component.ts:432 

Basically it seems to me that the [(ngModel)] attribute doesn't fill the related component variables.

Why? What is wrong? What am I missing? How can I try to fix this issue?

Answer 1

1. You can use (ngModelChange) to check value that ngModel emit
2. I think the problem comes from output (onInput)

• Same as 1, you can use (ngModelChange) to handle event deductibleNg change
• Use reactive form

FormGroup.get('deductible').valueChanges.subscribe((val) => {
// handle logic here
})