Я делаю приложение для расчета расстояния, используя угловой, который имеет,
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]
}));
});
}
}
Приведенный выше код только для справки, весь код приведен здесь в рабочем примере https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-itrxah
Требование: В этом примере выможно увидеть, что в раскрывающемся списке «Выбор» изначально указано «выбрать транспортное средство», при выборе любого из двух транспортных средств вы получите тариф за километр для транспортного средства на основе от и до км в таблице.
После этой таблицы есть три раскрывающихся списка: От местоположения, До местоположения, Общее пройденное расстояние , а в пустом поле ввода указано Общая стоимость проезда .
То, что я нахожусь внеобходимо, если пользователь выбирает Vehicle One(vehicle), Location A (From Location), Location C (To Location), 20KM (Total Distance travelled), тогда необходимо обновить общий ввод тарифа до значения 350.
На основе вышеуказанного выбора (где общее пройденное расстояние составило 20Km в транспортном средстве один) расчет будет,
дляe первые 5 KMS (0 - 5) , стоимость проезда 10 / км, поэтому 5 * 10 = 50 , где следующие 15 KMS (от 6 до 20) тариф составляет 20 / км, поэтому 15 * 20 = 300 .
Таким образом, общая стоимость проезда составила 50 + 300 = 350
.Сценарий только для примера, и вот так, если я выберу второе транспортное средство, тогда тариф должен рассчитываться в соответствии с его разбивкой на километры и тарифами / км.
Если выбор был таким, как указано выше, то общее значение для ввода тарифа,
<input type="number"
placeholder="Fare Per Km"
formControlName="farePerKm">
необходимо обновить с вычисленным выше значением 350 в соответствии с приведенным выше примером, который зависит от выбора.
Редактировать: Пожалуйста, не делайтене беспокоиться о данной структуре, потому что в моем реальном приложении я использую карты для вычисления пройденного расстояния, теперь я сделал все это внутри формы.
Единственное требование - мне нужно получить общее количествостоимость проезда от общего расстояния, пройденного гонщиком в транспортном средстве, которое имеет вертел для расчета тарифавверх на основе км, как указано.
Ниже приведен разбитый автомобиль.Так что, если я еду в этом автомобиле один на 20 км, то общая стоимость проезда должна составлять 350 (например) для любого другого транспортного средства, отличающегося разделением.
From Distance (Km) To Distance (Km) Fare Per Kilometer
0 5 10
6 20 20