Angular Typescript FormGroup 提交后赋值

Question

我将继续阅读关于 angular 的 Adam Freeman 书，但再次坚持使用 FormGroup 进行表单验证的示例，因为假设它曾经有效但现在打字稿的 2 个版本不喜欢它.

我可以看到它在尝试做什么，在单击提交按钮后，它获取每个表单值并将它们分配回我的产品对象。因此使用索引 ['name'] 类型的方法。如果我实际上将 'name'、'category' 或 'price' 的值放在 c 对 this.newProduct 的位置，它工作正常，但我还需要其他两个值已更新。

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

我的产品对象是这样的

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

我怎样才能使这项工作以易于理解的方式进行？

我找到了这个 link 但我似乎无法理解是否可以使用它。

书中记录的方法确实感觉过于复杂和笨拙，请给我一些 C# :)

Answer 1

Object.keys returns 一个字符串数组。这是有意的，例如 in this issue，

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

如果您知道自己在做什么，则可以对 Product 将作为索引接受的窄类型进行显式转换（更正式地说，类型断言）：

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

Angular Typescript FormGroup 提交后赋值

Angular Typescript FormGroup assigning value after submit

typescript

angular

formgroups