Ввод угловых форм не соответствует типу данных согласно интерфейсу, объявленному при назначении

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

Вы можете найти демо ЗДЕСЬ .

Answer 1

Как я добавил в своем комментарии, интерфейсы не имеют дело с преобразованием типов, и поле ввода использует строки в качестве поведения по умолчанию.

Добавьте атрибут 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>

Обновлен блик стека: https://stackblitz.com/edit/angular-jjrkaj

-Update-

Чтобы убрать вверх и вниз из числовых вводов, в ваших глобальных стилях вы можете применить следующий стиль.

styles.css

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

Или вы можете создать директиву для числа, которая обрабатывает синтаксический анализ, но это может быть излишним.

Answer 2

Поле HTML <input> по умолчанию обрабатывает входные данные как строки. Обработка типов в TypeScript является лишь вспомогательным средством компиляции поверх JavaScript и фактически не меняет природу любых типов лежащих в основе переменных JavaScript.

Исправление: type="number" поможет, чего я не думалбыло правдой раньше.