0

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

Здесь мы видим 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
  • [value] можете убрать, из ngOnInit перенести в конструктор, добавить везде name="...", и заменить this.updatedUserInfo = { ... this.userInfo }
    – entithat
    5 авг 2021 в 20:55

1 ответ 1

0

Спасибо 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.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.