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.
Example: $100,000,000
However this then changes the field to be NaN and thus my calculation functions fail.
Any help would be appreciated.
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?
Here's some of my current code:
Template
<h2>Income Statement</h2>
<div class="col-md-12">
<div fxLayout="row">
<div class="container col-md-6">
<div fxLayout="column">
<h3>New Values</h3>
<mat-chip-list>
<mat-chip>2019/11/14</mat-chip>
</mat-chip-list>
<form style="padding-right: 10px;">
<div class="form-group">
<label for="fundGrossAsset">Revenue</label>
<input [ngModel]="revenue" ui-money-mask (ngModelChange)="testPrice=$event" type="text" class="form-control" id="revenue" name="revenue" required placeholder="0">
</div>
<div class="form-group">
<label for="fundGrossAsset">- Cost Of Sales</label>
<input [ngModel]="costOfSales" (ngModelChange)="testPrice=$event" type="text" class="form-control" id="costOfSales" name="costOfSales" required placeholder="0">
</div>
<div class="form-group">
<label for="fundGrossAsset"><strong>= Gross Profit</strong></label>
<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>
</div>
<div class="form-group">
<label for="fundGrossAsset">- Operating Expense</label>
<input [ngModel]="operatingExpenses" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="operatingExpense" name="operatingExpenses" required placeholder="0">
</div>
<div class="form-group">
<label for="fundGrossAsset">+ Operating Income</label>
<input [ngModel]="operatingIncome" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="operatingIcome" name="operatingIncome" required placeholder="0">
</div>
<div class="form-group">
<label for="fundGrossAsset"><strong>= EBITDA</strong></label>
<input [ngModel]="ebitda" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="ebitda" name="ebitda" (click)="getEBITDA()" required placeholder="0" readonly>
</div>
<div class="form-group">
<label for="fundGrossAsset">- Depreciation/Amortisation</label>
<input [ngModel]="depreciation" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="depreciation" name="depreciation" required placeholder="0">
</div>
<div class="form-group">
<label for="fundGrossAsset"><strong>= EBIT</strong></label>
<input [ngModel]="ebit" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="ebit" name="ebit" (click)="getEBIT()" required readonly placeholder="0">
</div>
<div class="form-group">
<label for="fundGrossAsset">+ Income Interest</label>
<input [ngModel]="incomeInterest" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="incomeInterest" name="incomeInterest" required placeholder="0">
</div>
<div class="form-group">
<label for="fundGrossAsset">- Interest Expense</label>
<input [ngModel]="interestExpense" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="interestExpense" name="interestExpense" required placeholder="0">
</div>
<div class="form-group">
<label for="fundGrossAsset">+ Extraordinary Items</label>
<input [ngModel]="extraordinaryItems" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="extraordinaryItems" name="extraordinaryItems" required placeholder="0">
</div>
<div class="form-group">
<label for="fundGrossAsset">+ Other Income</label>
<input [ngModel]="otherIncome" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="otherIncome" name="otherIncome" required placeholder="0">
</div>
<div class="form-group">
<label for="fundGrossAsset"><strong>= Net Profit before tax</strong></label>
<input [ngModel]="netProfitBeforeTax" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="netProfitBeforeTax" name="netProfitBeforeTax" (click)="getNetBeforeTax()" required placeholder="0" readonly>
</div>
<div class="form-group">
<label for="fundGrossAsset">- Tax</label>
<input [ngModel]="tax" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="tax" name="tax" required placeholder="0">
</div>
<div class="form-group">
<label for="fundGrossAsset"><strong>= Net Profit After Tax</strong></label>
<input [ngModel]="netProfitAfterTax" covenantsCurrencyFormatter (ngModelChange)="testPrice=$event" type="text" class="form-control" id="netProfitAfterTax" name="netProfitAfterTax" (click)="getNetAfterTax()" required placeholder="0" readonly>
</div>
</form>
</div>
</div>
Component
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;
}
A converter method? Use text based inputs, but when you calculate these values convert the values back to number, an when the calculation finished convert back to string. See in my example: here.
convertToNumber(value: string): number {
return parseFloat(value.replace(/,/g, ''));
}
convertToString(value: number): string {
if (value.toString().indexOf(".") > -1) {
const decimal = value.toString().split(".")[1];
return (
this.convertToStringUtil(value.toString().split(".")[0]) + "." + decimal
);
} else {
return this.convertToStringUtil(value.toString());
}
}
convertToStringUtil(value: string): string {
return value
.split("")
.reverse()
.reduce((accum, value, index, { length }) => {
return (
accum +
value +
((index + 1) % 3 === 0 && index !== length - 1 ? "," : "")
);
}, "")
.split("")
.reverse()
.join("");
}