I'm currently facing an issue with populating my Edit Form using user data emitted from an event in my code. Despite my efforts, the form is not displaying the information correctly.
export class EditUserComponent implements OnInit{
constructor (private userService: UserService,
private router: Router,
private alertService: AlertService,
private formBuilder: FormBuilder) {
}
userModel: IEditUserModel;
editUserForm:FormGroup;
ngOnInit(): void {
this.editUserForm = this.formBuilder.group({
userName: ['123'],
firstname: ['123'],
lastname: ['123'],
email: ['123']
})
this.userService.getEditUserInfoEvent().subscribe({
next: (editUserInfo)=>
{
this.userModel = editUserInfo,
this.setEditFormEventValues(this.userModel)
console.log(this.userModel)
}
})
}
private setEditFormEventValues(userModel: IEditUserModel) {
this.editUserForm.patchValue({
userName: userModel.userName,
firstname: userModel.firstname,
lastname: userModel.lastname,
email: userModel.email
})
}
The placeholder "123" values are just for testing purposes. The user information event is triggered during OnInit. When I check the values at the final patchValue method bracket, I see the updated info like Foncho123 as my new username value from the event subscription. However, the actual form input fields remain unchanged. Is there something important that I might be overlooking? Here's a snippet of my HTML view template, where all input fields follow a similar structure.
<form [formGroup]="editUserForm">
<label for="uname">Username</label>
<input type="text" id="uname" name="username" formControlName="userName">