英文:
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<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,]),
})
//the form is much longer but shortening for example purposes
...
Broken Logic Here
ngOnInit(): void {
if (someLogic) {
Object.keys(this.exampleForm.controls).forEach((key) => {
this.exampleForm.controls[key].setValue("some value");
//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) => {
this.exampleForm.controls[key].setValue("some value");
//other logic here using key
});
}
...
if (someLogic) {
Object.keys(this.exampleForm.controls).forEach((key : string | null) => {
this.exampleForm.controls[key].setValue("some value");
//other logic here using key
});
}
//with this the above error goes away but instead I get a new one saying Type 'null' 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
我认为问题在于表单具有键q1
、q2
、q3
等,但您试图使用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('some value');
// ...
}
Since the compiler knows that this.exampleForm.controls
looks like this:
{
q1: ...,
q2: ...,
q3: ...
}
Only keys in the type 'q1' | 'q2' | 'q3'
are guaranteed to have a value when used to index it.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论