Cálculo de distância em angular

Estou fazendo um aplicativo de cálculo de distância usando angular que tem,

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

O código acima é apenas para referência, todo o código está aqui no exemplo de trabalho https: //stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-itrxa

Requerimento Neste exemplo, você pode ver que há uma lista suspensa de seleção que mostra inicialmente como escolher um veículo. Ao escolher qualquer um dos dois, você receberá a tarifa por quilômetro para o veículo com base nas bases de e para km em uma tabela.

Após esta tabela, há uma lista suspensa de trêDe Localização, Para Localização, Distância total percorrida e uma caixa de entrada vazia dizTarifa tota.

Thing estou precisando é se o usuário selecionaVehicle One(vehicle), Location A (From Location), Location C (To Location), 20KM (Total Distance travelled), a entrada total da tarifa precisa ser atualizada com o valor de 350.

Com base na seleção acima (onde a distância total percorrida foi 20Km no veículo um) o cálculo será,

Para o primeiro 5 KMS (0 - 5), a tarifa é de 10 / km, então 5 * 10 = 50, onde parapróxima 15 KMS (6 a 20) a tarifa é de 20 / km, então 15 * 20 = 300.

A tarifa total foi 50 + 300 = 350

O cenário acima é apenas um exemplo e, se eu escolher o segundo veículo, a tarifa precisará ser calculada de acordo com o km dividido e a tarifa / k

Se a seleção for como a mencionada acima, o valor total de entrada da tarifa,

<input type="number"
          placeholder="Fare Per Km" 
          formControlName="farePerKm">

precisa ser atualizado com o valor calculado acima de 350, de acordo com o exemplo acima, que varia dependendo da seleçã

Editar Por favor, não se preocupe com a estrutura dada, porque no meu aplicativo real eu estou usando mapas para calcular a distância percorrida, eu fiz tudo dentro da forma agor

Reino único é preciso obter o valor total da tarifa da distância total percorrida por um passageiro em um veículo com cálculo de tarifa cuspido com base no km, conforme indicado.

O abaixo indicado é o veículo um dividido. Portanto, se eu estiver viajando neste veículo um por 20 km, a tarifa total precisará ser 350 (por exemplo) da mesma forma para qualquer outro veículo diferent

From Distance (Km)  To Distance (Km)    Fare Per Kilometer

0                    5                   10

6                    20                  20

questionAnswers(2)

yourAnswerToTheQuestion