Angular Typescript FormGroup assigning value after submit

Question

I'm continuing to read the Adam Freeman book on angular but again stuck with the example around form validation using FormGroup, as presume it used to work but now 2 versions on typescript doesn't like it.

I can see what it is trying to do, after clicking the submit button it gets each form value and assigns them back onto my Product object. hence using the index ['name'] type approach. If I actually put the value of 'name', 'category' or 'price' in the place of c against this.newProduct, it works fine but then I also need the other two values to be updated.

Object.keys(this.formGroup.controls)
    .forEach(c => this.newProduct[c] = this.formGroup.controls[c].value)

My product object looks like this

export class Product {
    constructor(public id?: number,
    public name?: string,
    public category?: string,
    public price?: number) {}
}

How can I make this work in an understandable way?

I have found this link but I cant seem to fathom if I can use it or not.

Element implicitly has an 'any' type because expression of type 'string' can't be used to index

The approach documented in the book does feel overly complex and clunky, just give me some C# :)

Lazar Ljubenović · Accepted Answer · 2021-07-11 07:27:55Z

1

Object.keys returns an array of strings. This is intentional, as mentioned in this issue, for example.

Types in TS are open ended. So keysof will likely be less than all properties you would get at runtime.

If you know what you're doing, you can do an explicit cast (more formally, a type assertion) to a narrow type which Product will accept as an index:

const keys = Object.keys(this.formGroup.controls) as Array<keyof Product>
keys.forEach(c => this.newProduct[c] = this.formGroup.controls[c].value)

answered Jul 11, 2021 at 7:27

Lazar Ljubenović

19.9k10 gold badges58 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Over a year ago

Wow thank you, yes I dont know what I am doing just yet! something like that comes along and I'm stumped. Thanks for the great help, really appreciate it

Collectives™ on Stack Overflow

Angular Typescript FormGroup assigning value after submit

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related