I'm facing a challenge with data-bindings that I can't quite crack. It seems like my lack of expertise in the Angular domain might be the root cause.
If you have a solution, I would greatly appreciate it if you could provide a brief explanation as well.
The Problem:
I have a table where I use *ngFor to list all users from my data object. Each user has a collapsible section for editing, which includes "password" and "repeat password" fields.
Next to the "password" field, there is a button labeled "Generate" that triggers a function to generate a random password string.
My problem is that when I generate a new password, it updates the variable used for data-binding in every row of the table. I want each generated password to remain unique to its corresponding input field.
Pictures:
--------------------------------------------------------------------------- separate
Code:
manage-user.ts:
export class ManageUserComponent {
private updatedUserPassword: string;
private usersData: Object[] = [
{ userID: '1', firstName: 'Name0', lastName: 'lastname', username: 'user01@example.com', teamName: 'randomteamname', teamID: 1 },
// other user data entries...
];
// Other code snippets are available in the original question.
manage-user.html:
<div class="form-group col-lg-6 col-md-6 col-sm-6">
<div class="form-group">
<label>New Password</label>
<div class="input-group">
<input type="text" class="form-control" ngControl="edit_password" [(ngModel)]="updatedUserPassword" placeholder="Enter New Password">
<span class="input-group-btn">
<a (click)="generatePassword()" class="btn btn-primary">Generate</a>
</span>
</div>
</div>