установить значение ввода на основе раскрывающегося списка, выбранного с помощью formControlName - ReactiveForms

Question

У меня есть вход, значение которого должно основываться на выбранном раскрывающемся списке. вот мой код

<div class="col-sm-9">
  <nb-select type="number" fullWidth id="service" formControlName="service">
      <nb-option *ngFor="let service of Services" [value]="service">{{service.name}} </nb-option>
  </nb-select>
</div>

<input type="number value="service.price">

Мой файл .ts

Services: Array<any>=[
    {name: 'Consultation', price: 100}, 
    {name: 'Follow Up', price: 200}, 
    {name: '24 Hrs. Creatinine', price: 300}, 
    {name: 'Complete Blood Count - CBC', price: 400}, 
    {name: 'X-Ray', price: 500}];

Поэтому, когда выбрана консультация, входное значение должно быть 100. Аналогично, когда выбран рентген, входное значение должно быть установите на 500.

Я хочу использовать только formControl. ngModel не требуется. Помогите мне, как я могу достичь этого

Answer 1

Попробуйте это

<input type="number" value="{{form.controls['service'].value.price}}" />

Я предполагаю, что ваша группа находится в "форме"

<form [formGroup]="form">

Answer 2

Вы пытались использовать [(ngModel)] в поле ввода? с привязкой ngModel к эквивалентному значению элемента управления

вы можете использовать функцию обратного вызова в файле .ts, и ngModel будет равна ему.

пример:

getPriceEquivalent = () => {
    this.Services.forEach(x => {
      if(x.name === this.service.value){
         return x.price;
      }
    }); 
    return 0;
 }