title: Performing calculations using angular forms
body: <p>I have an Angular form in which all the inputs are numbers, and i want to add and subtract certain fields together and output the value in a separate form field. I managed to get the fields to calculate, however they require that the values have commas separating for every thousand. As well as a currency prefix for the number.</p>
  
  <p>Example: $100,000,000</p>
  
  <p>However this then changes the field to be NaN and thus my calculation functions fail.</p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Also there are multiple templates for these calculations, what would be easiest for multiple of them. Would i create a separate component for each calculation template or can i define a class for each template and import it?</p>
  
  <p>Here's some of my current code:</p>
  
  <p>Template</p>
  
  <pre><code>&lt;h2&gt;Income Statement&lt;/h2&gt;
  &lt;div class="col-md-12"&gt;
    &lt;div fxLayout="row"&gt;
    &lt;div class="container col-md-6"&gt;
      &lt;div fxLayout="column"&gt;
      &lt;h3&gt;New Values&lt;/h3&gt;
      &lt;mat-chip-list&gt;
      &lt;mat-chip&gt;2019/11/14&lt;/mat-chip&gt;
    &lt;/mat-chip-list&gt;
      &lt;form style="padding-right: 10px;"&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="fundGrossAsset"&gt;Revenue&lt;/label&gt;
          &lt;input [ngModel]="revenue" ui-money-mask (ngModelChange)="testPrice=$event" type="text" class="form-control" id="revenue" name="revenue" required placeholder="0"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="fundGrossAsset"&gt;- Cost Of Sales&lt;/label&gt;
          &lt;input [ngModel]="costOfSales" (ngModelChange)="testPrice=$event" type="text" class="form-control" id="costOfSales" name="costOfSales" required placeholder="0"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="fundGrossAsset"&gt;&lt;strong&gt;= Gross Profit&lt;/strong&gt;&lt;/label&gt;
          &lt;input style="border-color:green;" [ngModel]="grossProfits" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="number" class="form-control" id="grossProfit" name="grossProfits" (click)="getGrossProfit()" required placeholder="0" readonly&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="fundGrossAsset"&gt;- Operating Expense&lt;/label&gt;
          &lt;input [ngModel]="operatingExpenses" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="operatingExpense" name="operatingExpenses" required placeholder="0"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="fundGrossAsset"&gt;+ Operating Income&lt;/label&gt;
          &lt;input [ngModel]="operatingIncome" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="operatingIcome" name="operatingIncome" required placeholder="0"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="fundGrossAsset"&gt;&lt;strong&gt;= EBITDA&lt;/strong&gt;&lt;/label&gt;
          &lt;input [ngModel]="ebitda" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="ebitda" name="ebitda" (click)="getEBITDA()" required placeholder="0" readonly&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="fundGrossAsset"&gt;- Depreciation/Amortisation&lt;/label&gt;
          &lt;input [ngModel]="depreciation" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="depreciation" name="depreciation" required placeholder="0"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="fundGrossAsset"&gt;&lt;strong&gt;= EBIT&lt;/strong&gt;&lt;/label&gt;
          &lt;input [ngModel]="ebit" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="ebit" name="ebit" (click)="getEBIT()" required readonly placeholder="0"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="fundGrossAsset"&gt;+ Income Interest&lt;/label&gt;
          &lt;input [ngModel]="incomeInterest" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="incomeInterest" name="incomeInterest" required placeholder="0"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="fundGrossAsset"&gt;- Interest Expense&lt;/label&gt;
          &lt;input [ngModel]="interestExpense" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="interestExpense" name="interestExpense" required placeholder="0"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="fundGrossAsset"&gt;+ Extraordinary Items&lt;/label&gt;
          &lt;input [ngModel]="extraordinaryItems" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="extraordinaryItems" name="extraordinaryItems" required placeholder="0"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="fundGrossAsset"&gt;+ Other Income&lt;/label&gt;
          &lt;input [ngModel]="otherIncome" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="otherIncome" name="otherIncome" required placeholder="0"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="fundGrossAsset"&gt;&lt;strong&gt;= Net Profit before tax&lt;/strong&gt;&lt;/label&gt;
          &lt;input [ngModel]="netProfitBeforeTax" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="netProfitBeforeTax" name="netProfitBeforeTax" (click)="getNetBeforeTax()" required placeholder="0" readonly&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="fundGrossAsset"&gt;- Tax&lt;/label&gt;
          &lt;input [ngModel]="tax" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="tax" name="tax" required placeholder="0"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="fundGrossAsset"&gt;&lt;strong&gt;= Net Profit After Tax&lt;/strong&gt;&lt;/label&gt;
          &lt;input [ngModel]="netProfitAfterTax" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="netProfitAfterTax" name="netProfitAfterTax" (click)="getNetAfterTax()" required placeholder="0" readonly&gt;
        &lt;/div&gt;
  
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Component</p>
  
  <pre><code>
      templateForm: FormGroup;
        templateFormSub: Subscription;
        calculations: FormArray;
  
        totalDebt = 0.00;
        fundGrossAsset = 0.00;
        submitted = false;
  
        result: number;
        resultheading: any;
  
        revenue: number;
        costOfSales: number;
        grossProfits: number;
        operatingExpenses: number;
        operatingIncome: number;
        ebitda: number;
        depreciation: number;
        ebit: number;
        incomeInterest: number;
        interestExpense: number;
        extraordinaryItems: number;
        otherIncome: number;
        netProfitBeforeTax: number;
        tax: number;
        netProfitAfterTax: number;
         constructor(private _formBuilder: FormBuilder, private router: Router) {}
  
      onSubmit() { this.submitted = true; }
  
        getGrossProfit(revenue, costOfSales, grossProfits) {
  
          grossProfits = +this.revenue - +this.costOfSales;
        }
  
        getEBITDA(grossProfits, operatingExpenses, operatingIncome) {
          this.ebitda = this.grossProfits - this.operatingExpenses + this.operatingIncome;
        }
  
        getEBIT(ebitda, depreciation, ebit) {
          this.ebit = this.ebitda - this.depreciation;
        }
  
        getNetBeforeTax(ebit, incomeInterest, interestExpense, extraordinaryItems, otherIncome) {
          this.netProfitBeforeTax = this.ebit + this.incomeInterest - this.interestExpense + this.extraordinaryItems + this.otherIncome;
        }
  
        getNetAfterTax(netProfitBeforeTax, tax) {
          this.netProfitAfterTax = this.netProfitBeforeTax - this.tax;
        }
  
        getResult() {
          this.result = this.netProfitAfterTax;
        }
  
  </code></pre>