How to get a single value from FormGroup

AngularTypescriptAngular Reactive-Forms

Angular Problem Overview

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?

Angular Solutions

Solution 1 - Angular

You can get value like this

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

Solution 2 - Angular

Yes, you can.

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

Solution 3 - Angular

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

Solution 4 - Angular

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.

Solution 5 - Angular

Another option:

this.form.value['nameOfControl']

Solution 6 - Angular

You can use getRawValue()

this.formGroup.getRawValue().attribute

Solution 7 - Angular

This code also works:

this.formGroup.controls.nameOfcontrol.value

Solution 8 - Angular

You can do by the following ways

this.your_form.getRawValue()['formcontrolname]
this.your_form.value['formcontrolname]
Categories
Recommended Angular Solutions
Recommended Typescript Solutions
Recommended Angular Reactive-Forms Solutions

Previous Solution:

HTML5 Video autoplay on iPhone

IosHtmlVideoWebkitAutoplay

Next Solution:

Why is #include <string> preventing a stack overflow error here?

C++StringStack OverflowExplicit

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionStephen RomeroView Question on Stackoverflow
Solution 1 - AngularRemyaJView Answer on Stackoverflow
Solution 2 - AngularJulia PassynkovaView Answer on Stackoverflow
Solution 3 - AngularBen RacicotView Answer on Stackoverflow
Solution 4 - AngularbillyjovView Answer on Stackoverflow
Solution 5 - AngularhurlmanView Answer on Stackoverflow
Solution 6 - AngularosmanraifgunesView Answer on Stackoverflow
Solution 7 - Angularuser3059545View Answer on Stackoverflow
Solution 8 - AngularAhmad SharifView Answer on Stackoverflow