强制角度尊重 json 中的接口类型

Question

举个例子：

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>

为什么值不是字符串？在模型中是用字符串定义的，虽然输入类型是数字，因为我想友好地显示它，但我需要一个字符串，而且我不想单独转换（在一个模型中输入了一堆 itens 的场景中思考） .

谢谢

堆栈闪电战示例

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

Answer 1

另一个答案是 100% 正确，您想要做的事情应该在其他地方的映射函数中完成，但您仍然可以使用仅允许数字的 directive 来完成。

使用链接中的指令，html 将如下所示：

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

我不是写指令的人，我仍然认为你应该找到另一种方法。

Answer 2

该值不是字符串，因为您的输入设置为type="number"。

Typescript 只是 Javascript 的超集，您的界面并不存在。将所有代码转译为 JS 后，将 form.value（根据 [docs][1] 为 any 类型）分配给强类型变量将不会尝试将每个属性值转换或强制转换为特定类型.

使用以下打字稿：

//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);

现在，看看它归结为 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);