CODEWITHSUNDEEP
javascriptangulartypescript
Andrеw
Andrеw

Reputation: 123

Angular FormGroup patchValue works but changes are not shown

So I have this piece of code which subscribes to event which emits user data. This user data I want to pre-populate my Edit Form, but it is not working properly.

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 "123" values are for testing purposes. The event containing the user information is received during OnInit. Then, when I put breakpoint on the last patchValue method bracket here is the information about the form: enter image description here From here we can see that the values are somehow updated - Foncho123 is my new username value from the event subscribtion. But the actual visual form input fields are not changed, at all. Is there anything that I am missing? Here is a small piece of my HTML view, which is identical for all input fields.

<form [formGroup]="editUserForm">
    <label for="uname">Username</label>
    <input type="text" id="uname" name="username" formControlName="userName">

Upvotes: 1

Views: 1644

Answers (1)

MGX
MGX

Reputation: 3521

Use the change detection trigger

export class EditUserComponent implements OnInit{
    
    constructor (private userService: UserService,
        private router: Router,
        private alertService: AlertService,
        private formBuilder: FormBuilder
        private cdRef: ChangeDetectorRef) {
    }
    
    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)
                this.cdRef.detectChanges();
            }
        })
    }

    private setEditFormEventValues(userModel: IEditUserModel) {
      this.editUserForm.patchValue({
        userName: userModel.userName,
        firstname: userModel.firstname,
        lastname: userModel.lastname,
        email: userModel.email
      })
    }

Upvotes: 1

Related Questions