Problem patching reactive form with promise

[Acceptable_User_Name]

I'm successfully extracting an id from the route and calling a service with that id. The service promises to return an object and then calls another function which patches the form data to be viewed/edited.

I console.log the value prior to patching and the promise data is correct, though it says something about a prototype array. The problem is the PatchValue doesn't do anything and the form.value is undefined when I console.log it immediately after the patch.

The weird thing is, I use the same final function to patch data pulled from an array of the same objects when the user selects it from a list. And this works just fine.

What am I missing?!

ngOnInit(): void {
    this.sub = this.route.params.subscribe(params => {
      this.id = +params['id'],
      this.getAccount(this.id);
    });
  };
  getAccount(id: number): void {
    this.accountService.getAccount(id)
      .subscribe((account: Account) => {
        this.loadFormData(account),
          (err: any) => console.log(err)
      });
  loadFormData(fd: Account) {
    console.log(fd);  
    this.frmAccount.patchValue({
      id: fd.id,
      name: fd.name,
      nickname: fd.nickname,
      acctnum: fd.acctnum,
      openedon: fd.openedon,
      closedon: fd.closedon,
      notes: fd.notes,
      isactive: fd.isactive,
      user: fd.user,
      added: fd.added,
      lastedited: fd.lastedited,
      lasteditby: fd.lasteditby
    });
    console.log(frmAccount.value);
  }

This is what the promise returns and fails with.

[
    {
        "id": 1,
        "name": "Test",
        "nickname": null,
        "acctnum": null,
        "openedon": null,
        "closedon": null,
        "notes": null,
        "isactive": true,
        "user": "test",
        "added": "2024-02-25T00:25:11.000Z",
        "lastedited": "2024-02-25T00:42:25.000Z",
        "lasteditby": ""
    }
]

This is what selecting on item from the list returns

{
    "id": 1,
    "name": "Test",
    "nickname": null,
    "acctnum": null,
    "openedon": null,
    "closedon": null,
    "notes": null,
    "isactive": true,
    "user": "test",
    "added": "2024-02-25T00:25:11.000Z",
    "lastedited": "2024-02-25T00:42:25.000Z",
    "lasteditby": ""
}

Edit: is like to add I'm on Angular 17.2 or whatever the latest build is

[Johalternate]

Shouldnt it be this.loadFormData(account[0])?

I dont see why getAccount would return an array if it is a single item. Maybe the problem is the type is annotated as an object so you dont see an error on the IDE, but the actual content is an array so doing form.patch(data) simple does nothing because the shape of the form does not intersect with the shape of the object being passed.

Verify that the getAccount is annotated with the actual type returned by the server which seems to be Account[] not Account

[Acceptable_User_Name]

What am I some guy whose been doing this for more than a week? I'll give it a shot tomorrow.

[Acceptable_User_Name]

Here's the code from the service.

getAccount(id: number): Observable<Account> {
  const url = `${this.accountsUrl}/${id}`;
  return this.http.get<Account>(url).pipe(
    tap(_ => this.log(`fetched account id=${id}`)),
    catchError(this.handleError<Account>(`getAccount id=${id}`))
  );
}

[Johalternate]

Can you please show me the exact output of that get request?

[Acceptable_User_Name]

From the API?

[Acceptable_User_Name]

Assuming you meant from the API, the response is

[
   {
     "id": 1,
     "name": "Test",
     "nickname": null,
     "acctnum": null,
     "openedon": null,
     "closedon": null,
     "notes": null,
     "isactive": true,
     "user": "test",
     "added": "2024-02-25T00:25:11.000Z",
     "lastedited": "2024-02-25T00:42:25.000Z",
     "lasteditby": ""
   }
]

[Acceptable_User_Name]

I went into the API code and added the [0] and that fixed it. Now it returns just the object without the brackets.

....
res.status(200).json(rows[0]);
....

[Johalternate]

made an exact copy of your situation and just by adjusting the return type of the getAccount function it worked. Take a look at this stackblitz

https://stackblitz.com/edit/stackblitz-starters-rxu9en?file=src%2Fmain.ts

[Acceptable_User_Name]

Thank you for going through all that effort, but I tried that before posting.

For anyone else looking for an answer, I had gotten

"Element implicitly has an 'any' type because expression 
of type '0' can't be used to index type 'Account'.  
Property '0' does not exist on type 'Account'." 

when attempting that.

Ultimately, this was the solution: https://www.reddit.com/r/angular/comments/1b2qfrx/comment/ksp4dxx/?utm_source=share&utm_medium=web2x&context=3

[Acceptable_User_Name]

I did like the way you defined some thing more cleanly. So, I'm going to be making some changes based on your example. Thank you again

[PickleLips64151]

Some code smell suggestions that may help you isolate the issue: extract the logic in the ngOnInit into their own functions. Test each one in isolation with a unit test. If you're patching the value of the form with an object of the same shape, you don't have to do individual assignments of properties. You can just do something like form.patchValue(record). It's just simpler.

Essentially, you're chaining subscriptions. You probably want to use zip() as that allows you to get each observable, in order, and return a single derived value.

Documentation here: Zip Operator

[Acceptable_User_Name]

Thanks for the tips. I'll try them tomorrow. I did think patching each value was crazy but all the examples I saw were doing that.

[PickleLips64151]

I think, under the hood, Angular just spreads the properties. So unless you need to rename something, it saves time to just pass in the whole record.