Выполнение расчетов с использованием форм angular - PullRequest
Новая
       7

Выполнение расчетов с использованием форм angular

4 голосов
/ 17 января 2020

У меня есть форма Angular, в которой все входные данные являются числами, и я хочу сложить и вычесть определенные поля вместе и вывести значение в отдельном поле формы. Мне удалось получить поля для вычисления, однако они требуют, чтобы значения имели запятые, разделяющие каждую тысячу. А также префикс валюты для числа.

Пример: $ 100 000 000

Однако тогда это поле изменится на NaN, и, таким образом, мои функции вычисления потерпят неудачу.

Любая помощь будет Примите во внимание.

Также есть несколько шаблонов для этих вычислений, что было бы проще для нескольких из них. Буду ли я создавать отдельный компонент для каждого шаблона расчета или я могу определить класс для каждого шаблона и импортировать его?

Вот некоторые из моих текущих кодов:

Шаблон 

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

Ответы [ 2 ]

1 голос
/ 17 января 2020

вам нужно преобразовать все переменные и использовать их в своих функциях. Например: 

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

сделать это для всех остальных функций.

1 голос
/ 17 января 2020

Преобразователь метод? Используйте текстовые входные данные, но когда вы вычисляете эти значения, преобразуйте их обратно в число, а когда вычисление закончится, преобразуйте обратно в строку. Смотрите в моем примере: здесь . 

  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("");
  }
...