Force angular to respect type of interface in a json

Question

Take the example:

model.ts

export interface Item{
  name: string;
  age: string
}

component.ts

form: FormGroup

constructor(private fb: FormBuilder){}

onInit(){
  this.form = fb.group({
    name: [''],
    age: ['']
})
}
exampleFn(){
  const signature: Item = Object.assign({},this.form.value);

  console.log(typeof(signature.age)); // <=== HERE
  // output number

}

html

<form [formGroup]="form">
  <input formControlName="name" type="text"/>
  <input formControlName="age" type="number"/>
</form>

Why the value is not string? In model was defined with string, although the input type is number,because i wanna show it frindly, but i need in a string, and i dont wanna convert individualy (thinking in a scenerio that have a bunch of itens typed in a model).

thanks

STACKBLITZ EXAMPLE

https://stackblitz.com/edit/angular-ivy-z1sygf

Answer 1

The other answer is 100% right and what you want to do should be done in a mapping function somewhere else but you can still do it by using a directive that allow numbers only.

Using the directive from the link, the html would look like that:

<form *ngIf="form" [formGroup]="form">
  <input formControlName="name" type="text"/>
  <input formControlName="age" numbersOnly/>
</form>

Im not the one who wrote the directive and I still think you should find another way.

Answer 2

The value is not a string because your input is set to type="number" .

Typescript is just a superset of Javascript, where your interface does not exist. Once all your code is transpiled to JS, assigning form.value (which is an any type according to the [docs][1]) to a strongly typed variable will not try to convert or cast each attribute value to the specific type.

Take the following typescript:

//declare strongly typed interface
interface Item {
  name: string;
  age: string
};

//create a value of type any, which is essentially what "formGroup.value" is
const myFormValue: any = {
    name: '',
    age: '' //it's a string!
};

//set the value to a number, as what happens when someone interacts with your number input
myFormValue.age = 42;

//Assign and cast "myFormValue" as an "Item"
//This will not implicitly try to convert values for you
const formValueAsItem: Item = myFormValue;

console.log(formValueAsItem);

Now, take a look at what it looks like when it's boiled down to JS:

//create a value of type any, which is essentially what "formGroup.value" is
const myFormValue = {
    name: '',
    age: '' //it's a string!
};

//set the value to a number, as what happens when someone interacts with your number input
myFormValue.age = 42;

//There's no type here, we're simply creating a new variable and assigning it a value.
const formValueAsItem = myFormValue;

console.log(formValueAsItem);