В форме вставляется всё время 1 значение Angular

Всем привет. В форму после загрузки неправильно вставляются данные: введите сюда описание изображения

Здесь мы видим 3-и поля с одинаковым текстом.

component:

import { Component, OnInit } from "@angular/core";
import { UserInfoService } from "src/app/services/dataHome.service";
import { SettingUserService, UpdatedUserInfo } from "src/app/services/settingsUser.service";


@Component({
    selector: 'updateProperties-form',
    templateUrl: 'updateProperties.component.html'
})

export class UpdatePropertiesComponent{
    constructor(
        private settingsService: SettingUserService,
        public updatedUserInfo: UpdatedUserInfo,
        public userInfo: UserInfoService){
        }

        ngOnInit()
        {
            this.updatedUserInfo.EmailAddress = this.userInfo.emailAddress
            this.updatedUserInfo.Telegram = this.userInfo.telegram
            this.updatedUserInfo.Username = this.userInfo.username
            console.log(this.userInfo.telegram);
            
        }

        public updateUserInfo()
        {
            var result = this.settingsService.updateUserInfo(this.updatedUserInfo);
            console.log(result);
        }

}

html:

<form action="properties">
    <div class="col-md-5">
      <label for="inputEmail4">Email Address</label>
      <input [(ngModel)]="updatedUserInfo.EmailAddress" #updatedEmail="ngModel" type="email" class="form-control" id="inputEmail4" placeholder="Email" value="{{updatedUserInfo.EmailAddress}}">
    </div>
    <div class="col-md-5">
      <label for="telegram">Telegram</label>
      <input [(ngModel)]="updatedUserInfo.Telegram" type="text" class="form-control" placeholder="Telegram login" value="{{updatedUserInfo.Telegram}}">
    </div>
    <div class="col-md-5">
      <label for="name">Name</label>
      <input [(ngModel)]="updatedUserInfo.Username" #updatedUsername="ngModel" type="text" class="form-control" placeholder="Name" value="{{updatedUserInfo.Username}}">
    </div>
    <button (click)="updateUserInfo()" type="button" class="btn btn-primary mt-2">Save</button>
  </form>

скриншот консоли с выводом значения telegram:

введите сюда описание изображения

Как видно в ngonInit в данные класса присваиваются разные значения. С сервера они то же приходят разные, и в клиенте они то же разные, я проверял. Однако в форме все значения одинаковые. В чём проблема?


Ответы (1 шт):

Автор решения: AofA Group

Спасибо entithat за ответ. Вот как я решил эту проблему:

<form action="properties">
  <div class="col-md-5">
    <label for="inputEmail4">Email Address</label>
    <input [(ngModel)]="updatedUserInfo.EmailAddress" #updatedEmail="ngModel" type="email" class="form-control"
      id="inputEmail4" placeholder="Email" name="EmailAddress">
  </div>
  <div class="col-md-5">
    <label for="telegram">Telegram</label>
    <input [(ngModel)]="updatedUserInfo.Telegram" type="text" class="form-control" placeholder="Telegram login"
      name="Telegram">
  </div>
  <div class="col-md-5">
    <label for="name">Name</label>
    <input [(ngModel)]="updatedUserInfo.Username" #updatedUsername="ngModel" type="text" class="form-control"
      placeholder="Name" name="Username">
  </div>
  <button (click)="updateUserInfo()" type="button" class="btn btn-primary mt-2">Save</button>
</form>`

Я к каждому полю добавил параметр name с именем переменной в объекте в котором они хранятся, а так же убрал value.

→ Ссылка