Ниже у меня есть 5 полей ввода: аренда, камера, безопасность и поддержка, а также предполагаемый доход. Как теперь связать эти поля ввода, чтобы получить каждое значение, а также показать и присвоить итоговое значение из 5 полей общему полю арендной платы?

Каждый раз, когда значение меняется, например, на аренду, камеру и т. Д., Оно должно обновлять общее значение в поле общей ежемесячной аренды.

Например, если значение поля арендной платы равно 2, cam равно 1, безопасности равно 1, поддержке равно 1, а расчетный доход равен 1, то значение общей ежемесячной арендной платы равно 6. И если я изменю любое значение, оно должно обновить общую сумму.

У кого-нибудь есть идея, мы будем очень признательны.

enter image description here

#ts код

class DealPLSFormFields {
  dealName:string;
  dealSummary:string;
  dealPartner:string;
  startDate: string;
  endDate: string;
  rent: number;
  cam:number;
  totalBrokerCommission: number;
  supportServicesFee: number;
  estimatedOtherRevenue;
  descriptionOfOtherRevenue: string;
  totalMonthlyRentAndFees : number;
  buildOutCostReimbursement: number;
  dealId: number;
  securityMonitoring: any;

  constructor(){
    this.dealName = null;
    this.dealSummary = null;
  }
}

dealPLSFormFields: DealPLSFormFields;
  ngOnInit(): void {   
    this.dealPLSFormFields = new DealPLSFormFields();
   
  }

#html код

<div fxLayout="row" fxLayoutAlign="space-between center" >
            <mat-form-field appearance="fill" class="w-49per">
                <mat-label>Rent (Monthly)</mat-label>
                <input 
                  matInput
                  [(ngModel)]="dealPLSFormFields.rent"
                  [required]="isExistingDeal">
              </mat-form-field>
              <mat-form-field appearance="fill" class="w-49per">
                <mat-label>CAM (Monthly)</mat-label>
                <input 
                  matInput
                  [(ngModel)]="dealPLSFormFields.cam"
                  [required]="isExistingDeal">
              </mat-form-field>
          </div>
          <div fxLayout="row" fxLayoutAlign="space-between center" >
            <mat-form-field appearance="fill" class="w-49per">
                <mat-label>Security Monitoring (Monthly)</mat-label>
                <input 
                  matInput
                  [(ngModel)]="dealPLSFormFields.securityMonitoring"
                  [required]="isExistingDeal">
              </mat-form-field>
              <mat-form-field appearance="fill" class="w-49per">
                <mat-label>Support Services Fee (Monthly)</mat-label>
                <input 
                  matInput
                  [(ngModel)]="dealPLSFormFields.supportServicesFee"
                  [required]="isExistingDeal">
              </mat-form-field>
          </div>
          <mat-form-field appearance="fill">
            <mat-label>Estimated Other Revenue (e.g, percentage rent, refferal fees)</mat-label>
            <input 
              matInput
              [(ngModel)]="dealPLSFormFields.estimatedOtherRevenue"
              [required]="isExistingDeal">
          </mat-form-field>
          <mat-form-field appearance="fill">
            <mat-label>Description of Other Revenue</mat-label>
            <input 
              matInput
              [(ngModel)]="dealPLSFormFields.descriptionOfOtherRevenue"
              [required]="isExistingDeal">
          </mat-form-field>
          <mat-form-field appearance="fill">
            <mat-label>Total Monthly Rent and Fees</mat-label>
            <input 
              matInput
              [(ngModel)]="dealPLSFormFields.totalMonthlyRentAndFees"
              [required]="isExistingDeal">
          </mat-form-field>
2
Ananya Amar 17 Сен 2021 в 12:17

3 ответа

Лучший ответ

Как я уже сказал, для таких случаев лучше всего использовать реактивные формы, но если вы не можете и хотите продолжить текущую реализацию, внесите следующие изменения:

Добавьте прослушиватель клавиш ко всем элементам ввода, который будет выполнять расчет:

<div fxLayout="row" fxLayoutAlign="space-between center" >
<mat-form-field appearance="fill" class="w-49per">
    <mat-label>Rent (Monthly)</mat-label>
    <input 
      matInput
      (keyup) = "calc()"
      [(ngModel)]="dealPLSFormFields.rent"
      [required]="isExistingDeal">
    
  </mat-form-field>
  <mat-form-field appearance="fill" class="w-49per">
    <mat-label>CAM (Monthly)</mat-label>
    <input 
      matInput
      (keyup) = "calc()"
      [(ngModel)]="dealPLSFormFields.cam"
      [required]="isExistingDeal">
  </mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="space-between center" >
<mat-form-field appearance="fill" class="w-49per">
    <mat-label>Security Monitoring (Monthly)</mat-label>
    <input 
      matInput
      (keyup) = "calc()"
      [(ngModel)]="dealPLSFormFields.securityMonitoring"
      [required]="isExistingDeal">
  </mat-form-field>
  <mat-form-field appearance="fill" class="w-49per">
    <mat-label>Support Services Fee (Monthly)</mat-label>
    <input 
      matInput
      (keyup) = "calc()"
      [(ngModel)]="dealPLSFormFields.supportServicesFee"
      [required]="isExistingDeal">
  </mat-form-field>
</div>
<mat-form-field appearance="fill">
<mat-label>Estimated Other Revenue (e.g, percentage rent, refferal fees)</mat-label>
<input 
  matInput
  (keyup) = "calc()"
  [(ngModel)]="dealPLSFormFields.estimatedOtherRevenue"
  [required]="isExistingDeal">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Description of Other Revenue</mat-label>
<input 
  matInput
  (keyup) = "calc()"
  [(ngModel)]="dealPLSFormFields.descriptionOfOtherRevenue"
  [required]="isExistingDeal">
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Total Monthly Rent and Fees</mat-label>
<input 
  matInput
  [(ngModel)]="dealPLSFormFields.totalMonthlyRentAndFees"
  [required]="isExistingDeal">
</mat-form-field>

Затем в вашем компоненте:

 calc() {
    const rent = this.dealPLSFormFields.rent ? this.dealPLSFormFields.rent : 0;
    const cam = this.dealPLSFormFields.cam ? this.dealPLSFormFields?.cam : 0;
    this.dealPLSFormFields.totalMonthlyRentAndFees = +rent + +cam;
  }

Посмотрите этот stackblitz на рабочий пример: https://stackblitz.com/edit/angular-9-material-starter-5ceexh?file=src/app/app.module.ts

2
Ritesh Waghela 17 Сен 2021 в 09:44

Если вам нужно изменить поле totalMonthlyRentAndFees для хранения общего значения, чтобы иметь возможность отправить его позже на сервер, вы можете добиться этого, прислушиваясь к изменениям других полей (используя ngModelChange) и вычисление totalMonthlyRentAndFees на их основе.

Вы можете изменить свой код следующим образом:

model = {
  x: 1,
  y: 2,
  total: 3,
};

onChange() {
  this.model.total = Number(this.model.x) + Number(this.model.y);
}
<label>X</label>
<input [(ngModel)]="model.x" (ngModelChange)="onChange()" />

<label>Y</label>
<input [(ngModel)]="model.y" (ngModelChange)="onChange()" />

<label>Total</label>
<input [ngModel]="model.total" />

Вот рабочая демонстрация StackBlitz.

Примечание. Вы можете привязать вход total к свойству getter и присвоить значение в нем общему свойству, а затем вернуть его. Однако это приведет к тому, что свойство getter будет вычисляться при каждом обнаружении углового изменения.

3
Amer 17 Сен 2021 в 10:44

Похоже, вы используете форму на основе шаблонов. Чтобы сделать это довольно просто, вы можете использовать геттер Typescript.

get mySum() {
  return this.dealPLSFormFields.rent + this.dealPLSFormFields.cam + etc
}

Теперь вы можете получить доступ к значению этого расчета следующим образом:

Ts:

console.log(this.mySum)

Html:

{{ mySum }}

Вы также можете передать его в поле формы, используя одностороннюю привязку:

[ngModel]="mySum"

И сделайте поле формы только для чтения

В качестве альтернативы вы можете переключиться на реактивную форму и использовать valueChanges для расчета:

this.reactiveForm.valueChanges.subscribe(x => {
  // do calculation here
})

Подход с реактивной формой более программный и менее затратный, поскольку геттеры TypeScript выполняются постоянно. Однако, поскольку ваши вычисления довольно легкие, вам должно быть хорошо придерживаться формы, управляемой шаблоном.

1
danday74 17 Сен 2021 в 09:35