Cannot read html input field value using form.value - angular5

Question

I am using angular 5

In my html I generate the value of a input field using

<input type="number" class="form-control" id="unitCost" name="unitCost"    [(ngModel)]="unitCost" placeholder="Average Unit Price">
document.getElementById("unitCost").value = avgVal;

then I want to retrieve that generated value in my component.ts using

this.unitCost = form2.value.unitCost;

But it returns null value. instead if I type any value in the text field it works fine and returns the value I typed. Can I solve this issue?

Please don't use same word for id, name and model. Answer to your question is, this.unitCost will itself have value, because ngModel contains value and it's two way binding. — Sidhanshu_
– Sidhanshu_, Commented Jun 19, 2018 at 11:14
Don't mix Jquery with Angular and as a matter of fact you are already using 2 way data binding [(ngModel)]="unitCost" does not it take care of your requirements. — Vikas
– Vikas, Commented Jun 19, 2018 at 12:18

Gurvinder Guraya · Accepted Answer · 2018-06-19 11:23:06Z

1

the best way to achieve what you want is

<input type="number" class="form-control" id="unitCost"  [(ngModel)]="unitCost" placeholder="Average Unit Price">

now in your component class you will have a variable called unitCost and you can get or set the value of the text field like this

setting value - unitCost = 'value' gettingValue - unitCost

let me know if this is clear or i will create an example for you

answered Jun 19, 2018 at 11:23

Gurvinder Guraya

6694 silver badges9 bronze badges

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

2 Comments

Piu Over a year ago

I am sorry! I don't get it. can you explain it a bit

Gurvinder Guraya Over a year ago

here is an example I created please look at the app.component.ts and app.component.html stackblitz.com/edit/…

Aditya Goswami · Accepted Answer · 2018-06-19 11:15:22Z

0

Use [ngValue] directive of angular.

answered Jun 19, 2018 at 11:15

Aditya Goswami

1043 bronze badges

Collectives™ on Stack Overflow

Cannot read html input field value using form.value - angular5

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related