使用 angular 表格进行计算
Performing calculations using angular forms
我有一个 Angular 表单,其中所有输入都是数字,我想将某些字段一起加减并在单独的表单字段中输出值。我设法得到要计算的字段,但是它们要求每千个值都用逗号分隔。以及数字的货币前缀。
示例:100,000,000 美元
然而,这会将字段更改为 NaN,因此我的计算函数失败。
如有任何帮助,我们将不胜感激。
这些计算也有多个模板,其中多个模板最简单。我会为每个计算模板创建一个单独的组件,还是我可以为每个模板定义一个 class 并导入它?
这是我当前的一些代码:
模板
<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>
组件
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;
}
转换器方法?使用基于文本的输入,但当您计算这些值时,将值转换回数字,并在计算完成后转换回字符串。请参阅我的示例: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("");
}
您需要转换所有变量并在您的函数中使用它们。
例如:
getEBITDA(grossProfits, operatingExpenses, operatingIncome) {
grossProfits = Number(grossProfits.replace(/[^0-9\.]+/g,""));
operatingExpenses = Number(operatingExpenses.replace(/[^0-9\.]+/g,""));
operatingIncome = Number(operatingIncome.replace(/[^0-9\.]+/g,""));
this.ebitda = grossProfits - operatingExpenses + operatingIncome;
}
对所有其他功能执行此操作。
我有一个 Angular 表单,其中所有输入都是数字,我想将某些字段一起加减并在单独的表单字段中输出值。我设法得到要计算的字段,但是它们要求每千个值都用逗号分隔。以及数字的货币前缀。
示例:100,000,000 美元
然而,这会将字段更改为 NaN,因此我的计算函数失败。
如有任何帮助,我们将不胜感激。
这些计算也有多个模板,其中多个模板最简单。我会为每个计算模板创建一个单独的组件,还是我可以为每个模板定义一个 class 并导入它?
这是我当前的一些代码:
模板
<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>
组件
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;
}
转换器方法?使用基于文本的输入,但当您计算这些值时,将值转换回数字,并在计算完成后转换回字符串。请参阅我的示例: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("");
}
您需要转换所有变量并在您的函数中使用它们。 例如:
getEBITDA(grossProfits, operatingExpenses, operatingIncome) {
grossProfits = Number(grossProfits.replace(/[^0-9\.]+/g,""));
operatingExpenses = Number(operatingExpenses.replace(/[^0-9\.]+/g,""));
operatingIncome = Number(operatingIncome.replace(/[^0-9\.]+/g,""));
this.ebitda = grossProfits - operatingExpenses + operatingIncome;
}
对所有其他功能执行此操作。