I am encountering an issue where I am unable to retrieve the updated input value from a reactive ngForm in order to perform the necessary calculation. Please refer to my requirements outlined in the attached screenshot.
https://i.sstatic.net/IhGIZ.jpg form code:
<form #adForm="ngForm" (onSubmit)="onSubmit(adForm)">
<table class="table text-center">
<thead>
<tr>
<th scope="col"><div class="align-middle">#</div></th>
<th scope="col"><div class="align-middle">MonthlyFee</div></th>
<th scope="col"><div class="align-middle">Months</div></th>
<th scope="col"><div class="align-middle">Total Fee</div></th>
<th scope="col"><div class="align-middle">Confirm</div></th>
</tr>
</thead>
<tbody>
<tr class="border_bottom">
<td class="align-middle">123</td>
<td class="align-middle">{{ads.price | currency}}</td>
<td class="align-middle">
<input
type="number" min="1" max="12"
required
class="form-control ml-4"
id="months"
placeholder="{{0}}"
name="months"
[(ngModel)]="ads.months"
>
</td>
<td class="align-middle">{{ads.adsFee}}</td>
<td class="align-middle">
<button class="btn btn-outline-primary" (click)="onCreate()">Create</button>
</td>
</tr>
</tbody>
</table>
</form>In TypeScript, I anticipate executing a simple calculation: totalFee = price * months;