Angular 16升级后出现类型错误：string不可赋值给number参数

问题原因 #

你遇到的错误源于Angular 16收紧了表单类型检查：

• 若代码里的form是FormArray类型，它的get()方法仅接受number类型的索引参数；
• 但你通过for...in遍历的是this.form.controls（FormGroup的控件集合，键为string类型），将string类型的field传入FormArray的get()方法，就会触发类型不匹配错误。
• 另外也可能是变量名写错：你遍历的是this.form的控件，但调用的是其他form（比如FormArray实例）的get()方法。

解决方案 #

方案1：修正变量名（针对FormGroup场景） #

如果要操作的this.form是FormGroup类型，确保调用的是它的get()方法，而非其他FormArray实例：

for (const field in this.form.controls) {
  let control: any = this.form.get(field); // 替换为this.form，而非其他form变量
  if (control && control.dirty && !control.valid && control.errors) {
    if (control.errors["pattern"]) console.log(`${field} cannot contain special characters`);
    if (control.errors["required"]) console.log(`Please enter ${field}`);
  }
}

方案2：适配FormArray场景 #

如果你的form是FormArray类型，需要先遍历数组索引，再操作每个子FormGroup的控件：

// 假设form为FormArray类型
this.form.controls.forEach((group: FormGroup) => {
  for (const field in group.controls) {
    let control: any = group.get(field);
    if (control && control.dirty && !control.valid && control.errors) {
      if (control.errors["pattern"]) console.log(`${field} cannot contain special characters`);
      if (control.errors["required"]) console.log(`Please enter ${field}`);
    }
  }
});

更规范的遍历方式 #

推荐用Object.keys()遍历FormGroup的控件键，避免for...in的隐式类型问题：

Object.keys(this.form.controls).forEach(field => {
  const control = this.form.get(field);
  if (control?.dirty && !control.valid && control.errors) {
    if (control.errors["pattern"]) console.log(`${field} cannot contain special characters`);
    if (control.errors["required"]) console.log(`Please enter ${field}`);
  }
});

内容的提问来源于stack exchange，提问作者User User