I am facing a challenge with a form that I have designed. Could you guide me on how to dynamically update the value of the calculate field (contingency) whenever the user modifies the values of budget1 and budget2? I have attempted several approaches without success so far.
.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();
}
//initialize Form
initForm() {
this.form = this.formBuilder.group({
budget1: ['', Validators.required],
budget2: ['', Validators.required],
contingency: [{ value: 0, disabled: true }],
});
}
}