Как автоматически суммировать три значения формы, и результат будет автоматически заполнен в другой форме ввода в Angular

Question

У меня есть требование как четыре ввода формы, которые принимают только числа в качестве ввода, три ввода формы должны быть суммированы и добавить эту сумму к входу четвертой формы. Как сказано в коде, если заполнены верхняя емкость, меньшая емкость и емкость переменного тока, сумма этих трех полей должна быть заполнена в общей емкости. Как я могу добиться этого в угловых 4. Я новичок в угловых.

  In TS file I wrote as
  UDC: number=0;
  LDC: number=0;
  ACC: number=0;
  TSC: number=this.UDC+this.LDC+this.ACC;
 But TSC is getting sum value it is taking only UDC value.

<div class="form-group">
            <label for="upperDeck_Capacity" class="control-label col-sm-4">Upper D Capacity</label> 
            <div class="col-sm-3">
            <input  OnlyNumber="true" class="form-control" placeholder="0" formControlName="upperDeck_Capacity" [(ngModel)]='UDC' >
            </div>
            <div class="col-sm-offset-4 col-sm-7">
        <label *ngIf="registrationForm.get('upperDeck_Capacity').invalid && processValidation" [ngClass] = "'error'">Upper deck capacity is required. </label>
        </div></div>
<div class="form-group">
            <label for="lowerDeck_Capacity" class="control-label col-sm-4">Lower D Capacity</label> 
            <div class="col-sm-3">
            <input OnlyNumber="true" class="form-control" placeholder="0" formControlName="lowerDeck_Capacity" [(ngModel)]='LDC'>
            </div>
            <div class="col-sm-offset-4 col-sm-7">
            <label *ngIf="registrationForm.get('lowerDeck_Capacity').invalid && processValidation" [ngClass] = "'error'">Lower deck capacity is required. </label>
         </div></div>

        <div class="form-group">
            <label for="ac_Capacity" class="control-label col-sm-4">AC Capacity</label> 
            <div class="col-sm-3">
            <input OnlyNumber="true" class="form-control" placeholder="0" formControlName="ac_Capacity" [(ngModel)]='ACC'>
            </div>
            <div class="col-sm-offset-4 col-sm-7">
            <label *ngIf="registrationForm.get('ac_Capacity').invalid && processValidation" [ngClass] = "'error'">AC capacity is required. </label>
        </div></div>

        <div class="form-group">
            <label for="total_Seat_Capacity" class="control-label col-sm-4">Total Capacity</label> 
            <div class="col-sm-3">
            <input type="text" class="form-control" placeholder="0" formControlName="total_Seat_Capacity" [(ngModel)]='TSC'>
            </div><div class="col-sm-offset-4 col-sm-7">
            <label *ngIf="registrationForm.get('total_Seat_Capacity').invalid && processValidation" [ngClass] = "'error'">Total seat capacity is required. </label>
        </div>
    </div>