动态设置计算出的属性值

Question

我下面有一张表格。当用户更改budget1和budget2属性的值时，您能告诉我如何动态地填充计算字段值( calculate，budget2)吗？我已经尝试过很多方法-没有运气。

.html

    <form [formGroup]="form" (submit)="createOrUpdate(form)" novalidate>
        <ion-item>
          <ion-input type="text" formControlName="budget1" [(ngModel)]="project.budget1"></ion-input>
        </ion-item>
        <ion-item>
         <ion-input type="number" formControlName="budget2" [(ngModel)]="project.budget2"></ion-input>
        </ion-item>
       <ion-item>
       <ion-input type="text" formControlName="contingency" [(ngModel)]="project.contingency" disabled></ion-input>
       </ion-item>
   </form>

model.ts

export class ProjectDetail {
    budget1: number;
    budget2: number;
    contingency: number;
 }

.ts

export class ProjectComponent {

  @Input() data: any;
  @Output() onSelectProject: EventEmitter<any> = new EventEmitter<any>();
  form: FormGroup; project: ProjectDetail = new ProjectDetail();

  constructor(private formBuilder: FormBuilder) {
    this.initForm();
  }

  //init Form
  initForm() {
    this.form = this.formBuilder.group({
      budget1: ['', Validators.required],
      budget2: ['', Validators.required],
      contingency: [{ value: 0, disabled: true }],
    });
  }
}

Answer 1

您可以使用ngModelChange并将值传递给函数，然后在函数中计算它们，

 <ion-item>
          <ion-input type="text" (ngModelChange)="calculateContingency()" formControlName="budget1" [(ngModel)]="project.budget1"></ion-input>
        </ion-item>
        <ion-item>
         <ion-input type="number" (ngModelChange)="calculateContingency()" formControlName="budget2" [(ngModel)]="project.budget2"></ion-input>
        </ion-item>
 <ion-item>

在TS中

calculateContingency(){
   this.contingency = this.project.budget2 + this.project.budget1;
}