How To Bind Interpolation Data To ngModel In angular 6

Question

• I'm trying to subtract two values and bind it to ngModel I'm Getting Null Values While Sending Data To Post Request.

Please Check This Image It Contains My Output

• I used Two binding But The Value Is Not updating It showing Pending_amount as null value

  <input type="number" matInput placeholder="Pending Amount [(ngModel)]='paymentmodel.pending_amount' [(value)]="paymentmodel.total_amount - paymentmodel.advance_amount" name="pendingamount">

• For example: paymentmodel.total_amount = 10 paymentmodel.advance_amount" = 5 paymentmodel.pending_amount = 5

Answer 1

Welcome to stack overflow!

When using two-way binding, the binding both sets the value and gets the value.

You should not also use the value property. Try removing it.

Are you setting pending_amount anywhere else (other than the value property)?

If not, try adding the following to your component:

get pending_amount(): number {
  return paymentmodel.total_amount - paymentmodel.advance_amount;
}

This calculates the amount and provides it in a local pending_amount property. NOTE: This is separate from the paymentmodel's pending_amount property.

Then change your binding as follows:

<input type="number" 
       matInput placeholder="Pending Amount 
       [(ngModel)]='pending_amount'
       name="pendingamount">

This then binds to the local value.

Does that work for you?