В форме вставляется всё время 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.
