如何在Angular 14中迭代严格类型化的FormGroup控件

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

Angular14 How to iterate through a strictly typed FormGroups controls

问题

这是你的翻译内容:

Form Setup

export interface ExampleForm{
    q1: FormControl<string | null>,
    q2: FormControl<string | null>,
    q3: FormControl<string | null>,
    // 其他控件...
}

// 其他代码...

exampleForm = this.fb.group<ExampleForm>({
    q1: new FormControl('',['Validators.required']),
    q2: new FormControl('',['Validators.required']),
    q3: new FormControl('',['Validators.required']),
    // 其他控件...
})
// 表单的内容可能更长,这里只是为了示例

// 其他代码...

此处存在问题的逻辑

ngOnInit(): void {
    if (someLogic) {
      Object.keys(this.exampleForm.controls).forEach((key) => {
        this.exampleForm.controls[key].setValue("某个值");
        // 使用 key 进行其他逻辑
      });
    }
  }

我收到的错误信息:

因为类型为 'string' 的表达式不能用于索引类型为 '{ q1: FormControl<string | null>; q2: FormControl<string | null>; q3: FormControl<string | null>; ... }' 的对象,所以元素具有隐式 'any' 类型

我尝试过的方法:

if (someLogic) {
      Object.keys(this.exampleForm.controls).forEach((key: string) => {
        this.exampleForm.controls[key].setValue("某个值");
        // 使用 key 进行其他逻辑
      });
    }

// 其他代码...

if (someLogic) {
      Object.keys(this.exampleForm.controls).forEach((key: string | null) => {
        this.exampleForm.controls[key].setValue("某个值");
        // 使用 key 进行其他逻辑
      });
    }
// 使用上述方法可以消除上述错误,但会得到新的错误,提示无法将类型 'null' 用作索引类型。

此外,我需要在这些组上使用 forEach 块,而不仅仅是设置一个值,所以 patchValue() 不适用。

英文:

I am using Angular v14 and the upgrading my formGroups to strictly typed. I have a block of logic that if executed, iterates through all the controls of a FormGroup and does something - this part isn't important as I can't even get to this part

Here is what I have tried:

Form Setup

export interface ExampleForm{
    q1 : FormControl&lt;string | null&gt;,
    q2: FormControl&lt;string | null&gt;,
    q3: FormControl&lt;string | null&gt;,
    ...
}

...

exampleForm= this.fb.group&lt;ExampleForm&gt;({
    q1 : new FormControl(&#39;&#39;,[Validators.required,]),
    q2 : new FormControl(&#39;&#39;,[Validators.required,]),
    q3 : new FormControl(&#39;&#39;,[Validators.required,]),
  })
//the form is much longer but shortening for example purposes

...

Broken Logic Here

ngOnInit(): void {
    if (someLogic) {
      Object.keys(this.exampleForm.controls).forEach((key) =&gt; {
        this.exampleForm.controls[key].setValue(&quot;some value&quot;);
        //other logic here using key
      });
    }
  }

Error i receive:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ q1: FormControl<string | null>; q2: FormControl<string | null>; q3: FormControl<string | null>;

What I have tried:

if (someLogic) {
      Object.keys(this.exampleForm.controls).forEach((key:string) =&gt; {
        this.exampleForm.controls[key].setValue(&quot;some value&quot;);
        //other logic here using key
      });
    }

...

if (someLogic) {
      Object.keys(this.exampleForm.controls).forEach((key : string | null) =&gt; {
        this.exampleForm.controls[key].setValue(&quot;some value&quot;);
        //other logic here using key
      });
    }
//with this the above error goes away but instead I get a new one saying Type &#39;null&#39; cannot be used as an index type.

Also I need to use the forEach block on these groups for other reasons than just setting a value so patchValue() won't suffice.

答案1

得分: 1

我认为问题在于表单具有键q1q2q3等,但您试图使用string进行索引。尝试这样做:

for (const [key, control] of Object.entries(this.exampleForm.controls)) {
  control.setValue('some value');
  // ...
}

由于编译器知道this.exampleForm.controls的结构如下:

{
  q1: ...,
  q2: ...,
  q3: ...
}

只有类型为'q1' | 'q2' | 'q3'的键在用于索引时才保证有值。

英文:

I think the problem is that the form has the keys q1, q2, q3, etc. but you are trying to index it with a string. Try this:

for (const [key, control] of Object.entries(this.exampleForm.controls)) {
  control.setValue(&#39;some value&#39;);
  // ...
}

Since the compiler knows that this.exampleForm.controls looks like this:

{
  q1: ...,
  q2: ...,
  q3: ...
}

Only keys in the type &#39;q1&#39; | &#39;q2&#39; | &#39;q3&#39; are guaranteed to have a value when used to index it.

huangapple
  • 本文由 发表于 2023年7月14日 06:00:35
  • 转载请务必保留本文链接:https://go.coder-hub.com/76683499.html
匿名

发表评论

匿名网友

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

确定