How to get value as type Number on this.formgroup.value()?

Question

The value I get on submitting a form group is

{
  "name": "Sunil",
  "age": "23"
}

What I want is

{
  "name": "Sunil",
  "age": 23
}

My form group is as follows in my .ts file

myForm : FormGroup;
this.myForm = this._formbuilder.group({
  name: [''],
  age: [null]
});

Thanks. It worked. Is there no inbuilt way for angular to using validators or something? — Sunil Behera, Dec 03 '18 at 11:13
you can add validator on every control, you can `import { Validators } from '@angular/forms'`. For example, if you want the control to be required, you can add an array of validators while you build your form`name: ['', [Validators.required]]`. The best way is to check documentation : https://angular.io/api/forms/Validators try to implement it and open a specific question if you can't make it — Florian, Dec 03 '18 at 12:16

score 10 · Answer 1 · answered Dec 03 '18 at 09:40

10

Convert it before sending it.

const value = { ...this.myForm.value, age: +this.myForm.value.age };

Or you can use an input of type number.

<input type="number" formControlName="age">

answered Dec 03 '18 at 09:40

1

Thanks. It worked. Is there no inbuilt way for angular to using validators or something? – Sunil Behera Dec 03 '18 at 11:13
@SunilBehera you can add Validators.pattern to age form control – malbarmavi Dec 03 '18 at 11:28
@SunilBehera `input type="number"` is already validating that it is a number. You can still create your own with `NaN` or using a regex pattern. – Dec 03 '18 at 12:28
1

Validators too returns value as string – Sunil Behera Dec 04 '18 at 12:35
No, I'm saying you should validate that your string can be converted to number, but yeah, validators won't change your data type. – Dec 05 '18 at 07:54

score 2 · Answer 2 · answered Dec 03 '18 at 09:53

2

This just another solution power by rxjs , simply convert input string value to number value on valueChanges

const ageFormControl = this.myForm.get('age');

ageFormControl.valueChanges
  .pipe(distinct())
  .subscribe(value => ageFormControl.setValue(+value));

stackblitz demo

answered Dec 03 '18 at 09:53

malbarmavi

18,795
4
45
73

Thanks for the help. Is there anyway angular provide inbuilt without using pipes – Sunil Behera Dec 03 '18 at 11:14
you can't use angular pipe like number with input element – malbarmavi Dec 03 '18 at 11:21

How to get value as type Number on this.formgroup.value()?

2 Answers2