Как получить доступ к заполненным данным из формы?

Question

Данные заполняются из базы данных mongodb в форме. Я не могу сохранить эти заполненные данные в переменной. Результат, который я получаю, является "неопределенным". Вы видите в консоли (изображение), что все поля, которые я получаю, являются неопределенными

** Имя файла: HTML: -

<form (ngSubmit)="userInfo(f)" method="POST" #f="ngForm">

  <label for="fname">Token Number</label>
  <input type="number" [(ngModel)]="token" id="token" name="token" value="{{leadDetail?.data.token}}" placeholder="">
  <br>
  <br>

  <label for="name">Name</label>
  <input type="text" ngModel name="name" #name="ngModel" value="{{leadDetail?.data.user.name}}" placeholder="">

  <label for="num">Phone Number</label>
  <input type="number" ngModel name="num" #num="ngModel" value="{{leadDetail?.data.user.phoneNumber}}" placeholder="">
  <br>
  <br>

  <label for="gender">Gender</label>
  <input type="text" ngModel name="gender" #gender="ngModel" value="{{leadDetail?.data.gender}}" placeholder="">

  <label for="stage">Stage</label>
  <input type="text" ngModel name="stage" #stage="ngModel" value="{{leadDetail?.data.stage}}" placeholder="">

  <label for="service">Service</label>
  <input type="text" ngModel name="service" #service="ngModel" value="{{leadDetail?.data.service}}" placeholder="">

  <label for="person">Service Person</label>
  <input type="text" ngModel name="person" #person="ngModel" placeholder="">



  <input type="submit" value="Submit">

</form>

** Имя файла: - Файл TS: -

userInfo(form:any) {
     const info = {
       token : form.value.token,
       name : form.value.name,
       phoneNumber : form.value.phoneNumber,
       gender : form.value.gender,
       stage : form.value.stage,
       service : form.value.service,
       servicePerson: form.value.person
     }
     console.log(info)