Recently, I've been diving into Angular 2 and so far, I'm enjoying the experience. However, I could use some guidance to navigate this new territory.
One specific challenge I'm facing is with a form for editing user details and a list of users on the side. What I want to achieve is that when I click on a user in the list, the edit-user-form should be populated with that user's details (setEditForm(user)).
I have managed to make it work, but using ngControl and ngModel simultaneously doesn't feel quite right to me. Perhaps it is the correct approach, or maybe I just got lucky in getting it to work?
Can someone confirm if this is the appropriate method or if there is a better way to accomplish this task?
@Component({
template: `
<form (ngSubmit)="editUser(f.value)" #f="ngForm">
<input ngControl="nameInp" [ngModel]="selectedUser.name" type="text">
<input ngControl="ageInp" [ngModel]="selectedUser.age" type="text">
<input ngControl="cityInp" [ngModel]="selectedUser.city" type="text">
<button type="submit">Save</button>
</form>
)}
export class AdminComponent {
selectedUser:UserModel;
constructor() {
this.selectedUser = new UserModel;
}
setEditForm(user:UserModel) {
this.selectedUser = user;
}
editUser(form:any) {
// Update DB with values
console.log(form['nameInp']);
console.log(form['ageInp']);
console.log(form['cityInp']);
}
}