Angular (15) 无法扩展类型化的 FormGroup

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

Angular (15) Unable to extend a typed FormGroup

问题

我在使用类型化的 FormGroup 进行实验。

我创建了以下内容：

  1. export interface CustomFormControls {
  2.   name: FormControl<string | null>;
  3.   content: FormControl<string | null>;
  4. }
  6. export class CustomForm extends FormGroup<CustomFormControls> {
  7.   constructor() {
  8.     super({
  9.       name: new FormControl('name'),
  10.       content: new FormControl('content'),
  11.     });
  12.   }
  13. }

然后我尝试在一个组件中使用它：

  1. form: CustomForm = new CustomForm();

以及在模板中：

  1. <form class="Form" [formGroup]="form">

然而，我遇到了以下错误：

  1. Type 'CustomForm' is not assignable to type 'FormGroup<any>'.
  2.   Types of property 'controls' are incompatible.
  3.     Type 'CustomFormControls' is not assignable to type '{ [key: string]: AbstractControl<any, any>; }'.
  4.       Index signature for type 'string' is missing in type 'CustomFormControls'.
  5.      <form class="Form" [formGroup]="form">

我不确定我在这里做错了什么。

英文:

I am messing around with typed FormGroup.

I created the following:

  1. export interface CustomFormControls {
  2.   name: FormControl&lt;string|null&gt;
  3.   content: FormControl&lt;string|null&gt;
  4. }
  6. export class CustomForm extends FormGroup&lt;CustomFormControls&gt; {
  7.     constructor() {
  8.         super({
  9.             name: new FormControl(&#39;name&#39;),
  10.             content: new FormControl(&#39;content&#39;),
  11.         })
  12.     }
  13. }

and then I am trying to use it in a component:

  1. form: CustomForm = new CustomForm()

and in my template:

  1. &lt;form class=&quot;Form&quot; [formGroup]=&quot;form&quot;&gt;

However, I am getting the following error:

  1. Type &#39;CustomForm&#39; is not assignable to type &#39;FormGroup&lt;any&gt;&#39;.
  2.   Types of property &#39;controls&#39; are incompatible.
  3.     Type &#39;CustomFormControls&#39; is not assignable to type &#39;{ [key: string]: AbstractControl&lt;any, any&gt;; }&#39;.
  4.       Index signature for type &#39;string&#39; is missing in type &#39;CustomFormControls&#39;.
  5.          &lt;form class=&quot;Form&quot; [formGroup]=&quot;form&quot;&gt;

I am not sure to understand what I did wrong in there.

答案1

得分: 4

export interface CustomFormControls {
name: FormControl<string|null>;
content: FormControl<string|null>;
[key: string]: AbstractControl<any, any>;
}

英文:

Try adding an index signature for a string key

  1. export interface CustomFormControls {
  2.   name: FormControl&lt;string|null&gt;
  3.   content: FormControl&lt;string|null&gt;
  4.   [key: string]: AbstractControl&lt;any, any&gt;;
  5. }

答案2

得分: 0

  1. export interface CustomFormControls {
  2.   [key: string]: AbstractControl<string, string>;
  3.   name: FormControl<string|null>;
  4.   content: FormControl<string|null>;
  5. }
英文: 
  1. export interface CustomFormControls {
  2.   [key: string]: AbstractControl&lt;string, string&gt;;
  3.   name: FormControl&lt;string|null&gt;;
  4.   content: FormControl&lt;string|null&gt;;
  5. }

huangapple
  • 本文由 发表于 2023年3月7日 22:17:54
  • 转载请务必保留本文链接：https://go.coder-hub.com/75663160.html
  • angular
  • forms
匿名

发表评论

匿名网友

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

确定