Установите значение входного значения на основе выпадающего списка в angular

Question

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

Вот мой html код

<nb-card>
  <nb-card-header>
    Services
  </nb-card-header>
  <nb-card-body>
    <form>
      <div class="row">
        <div class="col-sm-4">
          <div class="row">
            <label for="bgrp" class="label col-sm-3 form-control-label">Services</label>
            <div class="col-sm-9">
              <nb-select selected="1" fullWidth id="service" (change)=onChange($event)>
                <nb-option *ngFor="let service of Services" [value]="service">{{service.name}}</nb-option>
              </nb-select>
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="row">
            <label for="bgrp" class="label col-sm-3 form-control-label">Unit Price</label>
            <div class="col-sm-9">
              <input type="number" nbInput fullWidth id="name" name="price"/>
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="row">
            <label for="bgrp" class="label col-sm-3 form-control-label">Discount</label>
            <div class="col-sm-9">
              <input type="number" nbInput fullWidth id="name" placeholder="Name"/>
            </div>
          </div>
        </div>
      </div>

    </form>
  </nb-card-body>
</nb-card>

И мой машинописный файл

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'

@Component({
  selector: 'ngx-service',
  templateUrl: './service.component.html',
  styleUrls: ['./service.component.scss']
})
export class ServiceComponent implements OnInit {
  Services: 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}];

  ngOnInit() {

  }

  public onChange(event){
    const val = event.target.value;
    this.price.setValue(event.target.value,{
      onlySelf: true
    })
  }


}

Поэтому, если консультация выбрана, цена должна быть установлена ​​на 100. Если Рентген выбран, цена должна быть установлена ​​на 500.

Я хочу, используя методы реактивной формы Помощь мне ...

Answer 1

Я получил ответ на свой вопрос, я сделал некоторые изменения в своем коде.

В HTML

<nb-select type="number" fullWidth id="service" [(ngModel)]="price" (ngModelchange)="toPrice()" [ngModelOptions]="{standalone: true}">
                <nb-option *ngFor="let service of Services" [value]="service.price">{{service.name}}</nb-option>

 <input type="number" nbInput fullWidth id="name" name="price" value="{{price}}"/>

и в .ts Файл

price:number;
  Services: Array<object>=[
    {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}];

toPrice(){
    this.price =+ this.price
    console.log(this.price);
  }

Answer 2

Пожалуйста, попробуйте это решение

<div class="col-sm-9">
     <nb-select selected="1" fullWidth id="service" (change)=onChange($event)>
        <nb-option *ngFor="let service of Services" [value]="service.price">{{service.name}}</nb-option>
     </nb-select>
</div>

Answer 3

РЕДАКТИРОВАТЬ: Здравствуйте, просто объявите переменную selectedService в вашем файле .ts и инициализируйте его в функции ngOnInit. Эта переменная будет содержать выбранный сервис. Это весь файл TS.

  selectedService: any;
   Services: 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}];
ngOnInit() {
this.selectedService = new Object();
  }

Затем в вашем HTML файл вы должны соединить их с той же NgModel, это пример моего HTML файла:

<label>Service</label>
 <select [(ngModel)]="selectedService">
    <option *ngFor="let service of Services" [ngValue]="service">
      {{service.name}}</option>
</select>
<br>
<label>Price</label>
<input type="text"  [(ngModel)]="selectedService.price" >

Answer 4

Как я вижу, не проверяя ваш код, я предлагаю вам использовать (change) = yourfunction () для этого. Это то, что вы сделали, но вы забыли использовать ngModel для привязки вашего значения, а затем повесить его с вашей функцией.