How to get a single value from FormGroup

Question

I am aware that I can get the values of a form using

JSON.stringify(this.formName.value)

However, I want to get a single value from the form.

How do I go about doing that?

score 229 · Accepted Answer · answered May 01 '17 at 10:07

229

You can get value like this

this.form.controls['your form control name'].value

answered May 01 '17 at 10:07

RemyaJ

5,358
4
22
41

32

`this.form.controls.email.value` also works without the brackets, but its up to you which style you prefer – Simon_Weaver Jan 03 '18 at 21:52
6

As said by @Julia, getting value by the "get()" method is better than this. – Kavinda Jayakody May 03 '20 at 13:36

score 188 · Answer 2 · answered May 01 '17 at 02:57

188

Yes, you can.

this.formGroup.get('name of you control').value

answered May 01 '17 at 02:57

Julia Passynkova

17,256
6
33
32

17

This should be right answer since you access via method rather than getting controls directly – Mohan Ram Aug 23 '18 at 12:58
2

Of course, this is the method used in the official documentation too. https://angular.io/guide/reactive-forms – Kavinda Jayakody May 03 '20 at 13:35
I want this to work - but depending on where you're using it in a component life cycle it may throw an error regarding `get()` not being available on the form. Where as using the `this.form.value.{name}` will properly return the value. – Levidps Mar 20 '23 at 04:17

Ben Racicot · Answer 3 · 2019-02-13T22:45:17.307

38

Dot notation will break the type checking, switch to bracket notation. You might also try using the get() method. It also keeps AOT compilation in tact I've read.

this.form.get('controlName').value // safer
this.form.controlName.value // triggers type checking and breaks AOT

edited Feb 13 '19 at 22:45

answered Nov 14 '18 at 00:17

Ben Racicot

5,332
12
66
130

1

I concur with the `.get()` method, however need to end with `.value` I think: `this.form.get('controlName').value` – rynop Feb 06 '19 at 17:00
3

I appreciate this answer as it gives the WHY. Thank you. – Mark Rullo Sep 16 '20 at 20:25

billyjov · Answer 4 · 2018-10-11T13:06:57.760

19

for Angular 6+ and >=RC.6

.html

<form [formGroup]="formGroup">
  <input type="text" formControlName="myName">
</form>

.ts

public formGroup: FormGroup;
this.formGroup.value.myName

should also work.

edited Oct 11 '18 at 13:06

answered Oct 11 '18 at 12:44

billyjov

2,778
19
35

the same , it's the most intuitive – alexandre marillesse Nov 24 '22 at 16:54

score 12 · Answer 5 · answered May 06 '20 at 19:14

12

Another option:

this.form.value['nameOfControl']

answered May 06 '20 at 19:14

hurlman

366
3
6

score 4 · Answer 6 · answered Nov 20 '19 at 14:39

4

You can use getRawValue()

this.formGroup.getRawValue().attribute

answered Nov 20 '19 at 14:39

osmanraifgunes

1,438
2
17
43

score 3 · Answer 7 · edited Oct 24 '18 at 04:53

3

This code also works:

this.formGroup.controls.nameOfcontrol.value

edited Oct 24 '18 at 04:53

Stephen Rauch

47,830
31
106
135

answered Oct 24 '18 at 04:30

user3059545

49
2

score 1 · Answer 8 · answered Aug 14 '20 at 05:49

1

You can do by the following ways

this.your_form.getRawValue()['formcontrolname]
this.your_form.value['formcontrolname]

answered Aug 14 '20 at 05:49

Ahmad Sharif

4,141
5
37
49

How to get a single value from FormGroup

8 Answers8

Linked