如何观察 ngForm 的变化并根据变化的值进行计算

Question

我未能从反应式 ngForm 中获取更改后的输入值，无法进行基于计算的操作。请看我截图中的要求。

表单代码：

<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>

在ts中，期望简单的计算： totalFee = price * months;

Answer 1

就是这样：

<td class="align-middle">{{ads.price * ads.months | currency}}</td>

如何观察 ngForm 的变化并根据变化的值进行计算

How to watch the ngForm change and do the calculation based on the changed value

data-binding

typescript

reactive

angular

angular-reactive-forms