Angular 表单输入与分配时声明的接口的数据类型不匹配

Question

为什么表单生成器值与接口中声明的类型不匹配？如何确保我的数字输入不会在 formGroup 中转换为字符串，因为我已严格设置用户只能输入数字。

我这里有一个示例表格：

<form [formGroup]="exampleForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label>Name: </label>
      <input class="form-control" formControlName="name">

    <br><label>Age: </label>
      <input class="form-control" formControlName="age">

    <br><button>Submit</button>
  </div>
</form>

以及一个与表单输入具有完全相同属性的界面：

export interface SampleInterface {
  name: string;
  age: number;
}

提交表单后，我将表单值分配给界面对象实例。我认为这会根据界面自动匹配 age 到 number 类型。但是，情况并非如此，因为我试图打印接口对象实例，但我看到它被当作字符串。

在我的 component.ts:

  onSubmit(){
    let submittedData = this.exampleForm.value;
    this.sampleObject = submittedData;
    console.log(this.sampleObject);
  }

正在控制台打印：

>{name: "Mike", age: "20"}
age: "20"
name: "Mike"
__proto__: Object

您可能会找到演示 HERE。

Answer 1

HTML <input> 字段默认将输入作为字符串处理。 TypeScript 的类型处理只是 JavaScript 之上的编译辅助，实际上并没有改变底层 JavaScript 变量的任何类型性质。

更正：type="number" 会有所帮助，我以前不认为这是真的。

Answer 2

正如我在评论中所说，接口不处理类型转换，并且输入字段使用字符串作为其默认行为。

将 type 属性添加到您的年龄并设置为数字。

<form [formGroup]="exampleForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label>Name: </label>
      <input class="form-control" formControlName="name">

    <br><label>Age: </label>
      <input class="form-control" type="number" formControlName="age">

    <br><button>Submit</button>
  </div>
</form>

已更新 stackblitz：https://stackblitz.com/edit/angular-jjrkaj

-更新-

要从数字输入中删除上下，您可以在全局样式中应用以下样式。

styles.css

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

或者您可以创建一个指令，用于处理解析的数字，但这可能有点矫枉过正。

Angular 表单输入与分配时声明的接口的数据类型不匹配

Angular form inputs not matching the data type as per the interface declared when being assigned

html

angular

typescript

angular-forms