Set value of Input value based on dropdown selection in angular

Question

I have a dropdown with few values and based on the value selected, the input field value should be set.

Here is my html code

<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>

And my typescript file is

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


}

So if consultation is selected, price should be set to 100. if x ray is selected, price should be set to 500.

I want it using reactiveformmodule methods Help me out...

What research have you done so far on reactive forms? What have you tried so far to get it working? What's your specific problem? — Kurt Hamilton
– Kurt Hamilton, Commented Mar 12, 2020 at 12:59
I didn't do much research on reactive forms. I'm just a beginner. I searched online how to do it, but didn't work for me. few of them used ngModel, but those didn't work either — Sravan Kumar
– Sravan Kumar, Commented Mar 12, 2020 at 13:05

Sravan Kumar · Accepted Answer · 2020-03-13 14:34:27Z

1

I got answer to my question, I have done some changes to my code.

In 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}}"/>

and in .ts File

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

answered Mar 13, 2020 at 14:34

Sravan Kumar

6428 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Justin Michaux · Accepted Answer · 2020-03-12 13:06:30Z

0

As I see it without testing your code, I suggest you to use (change)=yourfunction() for that. It's what you did but you forget to use ngModel to bindings your value then hang it with your function.

answered Mar 12, 2020 at 13:06

Justin Michaux

11 bronze badge

1 Comment

Sravan Kumar Over a year ago

Can you please tell me more

Malik Haseeb · Accepted Answer · 2020-03-12 13:13:57Z

0

Please try this solution

<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>

answered Mar 12, 2020 at 13:13

Malik Haseeb

67911 silver badges22 bronze badges

1 Comment

Sravan Kumar Over a year ago

No, it didn't work. You didn't mention any reference to the input field. How its value gets updated?

alexandros nikoloulopoulos · Accepted Answer · 2020-03-15 11:01:44Z

0

EDIT: Hello just declare a variable selectedService in your .ts file and initialize it in ngOnInit function.This variable will hold the selected Service.This the whole ts file.

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

Then in your HTML file you have to connect them with the same NgModel, this is an example of my HTML file:

<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" >

edited Mar 15, 2020 at 11:01

answered Mar 13, 2020 at 10:25

alexandros nikoloulopoulos

1792 silver badges5 bronze badges

2 Comments

Sravan Kumar Over a year ago

ERROR Error: "If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions. Example 1: <input [(ngModel)]="person.firstName" name="first"> Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">" I was getting this error

alexandros nikoloulopoulos Over a year ago

check the edited answer without any errors.I guess this is the proper way of impletenting what you want.

Collectives™ on Stack Overflow

Set value of Input value based on dropdown selection in angular

4 Answers 4

Comments

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related