I am developing an application for distance calculations using Angular, which consists of the following elements:
HTML:
<form [formGroup]="form" *ngIf="showForm">
<div formArrayName="distance" >
<table>
<thead>
<th> From Distance (Km) </th>
<th> To Distance (Km) </th>
<th> Fare Per Kilometer </th>
</thead>
<tbody>
<tr
*ngFor="let item of form.get('distance').controls; let i = index"
[formGroupName]="i">
<td>
<input type="number"
placeholder="From"
formControlName="from">
</td>
<td>
<input type="number"
placeholder="To"
formControlName="to">
</td>
<td>
<input type="number"
placeholder="Fare Per Km"
formControlName="farePerKm">
</td>
</tr>
</tbody>
</table>
</div>
</form>
TS:
selectedValues(e) {
this.showForm = true;
this.form = this.fb.group({
distance: this.fb.array([]),
});
const control = this.form.controls.distance as FormArray;
if (e.target.value === "V1") {
this.vehicleOne.forEach(data => {
control.push(this.fb.group({
from: [data.from, Validators.required],
to: [data.to, Validators.required],
farePerKm: [data.farePerKm, Validators.required]
}));
});
}
else if (e.target.value === "V2") {
this.vehicleTwo.forEach(data => {
control.push(this.fb.group({
from: [data.from, Validators.required],
to: [data.to, Validators.required],
farePerKm: [data.farePerKm, Validators.required]
}));
});
}
}
The code above serves as a reference. The complete code can be found in the working example https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-itrxah
Requirement: The objective is to provide the user with accurate fare calculation based on the vehicle selection and total distance travelled between two locations.
Upon selecting a vehicle, choosing the origin and destination locations, and inputting the distance traveled, the application should automatically calculate the total fare. For example, when selecting
Vehicle One(vehicle), Location A (From Location), Location C (To Location), 20KM (Total Distance traveled)This calculation takes into account the fare per kilometer rates specified for each segment of the journey. There are different split-up calculations for each vehicle model.
Note: The structure mentioned in the code snippet may vary, as the actual application involves map-based distance calculations integrated within the form fields.
Main Requirement: The primary goal is to determine the total fare cost based on the total distance traveled by a rider in a specific vehicle, considering the fare breakdown according to kilometers covered as indicated below.
Below is an example of the fare split-up for Vehicle One, where traveling 20km would result in a total fare of 350 (For example).
From Distance (Km) To Distance (Km) Fare Per Kilometer
0 5 10
6 20 20