Angular Typed Forms – 表单中的表单数组

huangapple
go评论57阅读模式
英文:

Angular Typed Forms - Array of Forms in Form

问题

我想在使用 Angular 15.1.0 时为我的表单启用严格类型检查。它包含了一组额外的旅行者。我想要的是类似于这样的代码：

startForm: FormGroup;
additionalTravelers: FormGroup[] = [];


但这并不起作用。现在我有的是这个：

additionalTravelers: FormArray =
new FormArray([]);


其中

export class TravelerFormGroup extends FormGroup {


但是这样我无法为 TravelerFormGroup 指定类型，因为在这里我会得到一个错误：
```

类型 'TravelerFormGroup' 无法分配给类型 'FormGroup'。
属性 'controls' 的类型不兼容。
类型 'TravelerMasterForm' 无法分配给类型 '{ [key: string]: AbstractControl<any, any>; }'。
类型 'TravelerMasterForm' 中缺少类型 'string' 的索引签名。

在这里使用 FormArray 是正确的吗？那么如何保持类型安全呢？我感到困惑。

感谢任何建议。


<details>
<summary>英文:</summary>

I want to use strict typing for my form using angular 15.1.0. It contains a list of additional travelers. What i want is something like this:

startForm: FormGroup<StartForm>;
additionalTravelers: FormGroup<TravelerForm>[] = [];


but this does not work. What i now have is this:

additionalTravelers: FormArray<TravelerFormGroup> =
new FormArray<TravelerFormGroup>([]);


with

export class TravelerFormGroup extends FormGroup {


but with this i can not type the TravelerFormGroup because i get an error here:

<form [formGroup]="travelerForm">


Type &#39;TravelerFormGroup&#39; is not assignable to type &#39;FormGroup&lt;any&gt;&#39;.
  Types of property &#39;controls&#39; are incompatible.
    Type &#39;TravelerMasterForm&#39; is not assignable to type &#39;{ [key: string]: AbstractControl&lt;any, any&gt;; }&#39;.
      Index signature for type &#39;string&#39; is missing in type &#39;TravelerMasterForm&#39;.

Am I on the right pass using FormArray here? How to keep type safety then? I am confused.

Thanks for any advice

</details>


# 答案1
**得分**: 0

是的，`FormArray` 是正确的。您应该像这样指定：

```typescript
interface Traveler {
  name: FormControl<string>;
  age: FormControl<number>;
}

form = new FormGroup({
  additionalTravelers: new FormArray<FormGroup<Traveler>>([]),
});

这里的主要要点是，您为表单控件指定的类型应该是表单控件本身，而不仅仅是值。例如，如果您有一个表单的模型如下：

type MyModel = {
  foo: number;
  bars: {
    hello: string;
  }[];
  stuff: string[];
}

然后，您会像这样为相应的 FormGroup 类型：

type MyModelFormGroup = FormGroup<{
  foo: FormControl<number>;
  bars: FormArray<FormGroup<{
    hello: FormControl<string>;
  }>>;
  stuff: FormArray<FormControl<string>>;
}>;
英文:

Yes FormArray is correct. You should specify like this:

interface Traveler {
  name: FormControl&lt;string&gt;;
  age: FormControl&lt;number&gt;;
}

form = new FormGroup({
  additionalTravelers: new FormArray&lt;FormGroup&lt;Traveler&gt;&gt;([]),
});

The main take-away here is that the types you specify for form controls should themselves be form controls, not just values. For example, if you have a model for a form like this:

type MyModel = {
  foo: number;
  bars: {
    hello: string;
  }[];
  stuff: string[];
}

Then you would type the corresponding FormGroup like this:

type MyModelFormGroup = FormGroup&lt;{
  foo: FormControl&lt;number&gt;;
  bars: FormArray&lt;FormGroup&lt;{
    hello: FormControl&lt;string&gt;;
  }&gt;&gt;;
  stuff: FormArray&lt;FormControl&lt;string&gt;&gt;;
}&gt;;

huangapple
  • 本文由 发表于 2023年7月18日 02:48:14
  • 转载请务必保留本文链接：https://go.coder-hub.com/76707324.html
  • angular
  • angular-forms
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定