set value of input based on the dropdown selected using formControlName - ReactiveForms

Question

I have an input whose value should be based on dropdown selected. here is my code

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

My .ts file

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

So when Consultation is selected, input value should be 100. Similarly when X-ray is selected, input value should be set to 500.

I want to use formControl only. ngModel is not required. Help me how can i acheive this

M A Salman · Accepted Answer · 2020-03-25 09:31:23Z

1

Try this

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

I assume your formgroup is "form"

<form [formGroup]="form">

answered Mar 25, 2020 at 9:31

M A Salman

3,8302 gold badges14 silver badges28 bronze badges

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

Comments

Michael · Accepted Answer · 2020-03-24 21:16:34Z

0

Have you tried using [(ngModel)] on the input field? with the ngModel binding towards the form control value equivalent

you could use callback funtion in the .ts file and the ngModel would be equal to it.

example:

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

answered Mar 24, 2020 at 21:16

Michael

231 silver badge5 bronze badges

2 Comments

Sravan Kumar Over a year ago

i don't want to use ngmodel. Because if i use both ngModel and formcontrol, I'm receiving an error. saying "It looks like you're using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7. "

Michael Over a year ago

So just create a formControl for the price input and a change listener on the top and anytime the listener is triggered you set your price formControl value to the equivalent of the name written in the top form control.

Collectives™ on Stack Overflow

set value of input based on the dropdown selected using formControlName - ReactiveForms

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related