Angular 17表单最后一个控件报Cannot find control with name错误的求助

嘿，我一眼就揪出问题根源啦！你遇到的这个Cannot find control with name: 'numberOfPicture'错误，其实是个非常典型的表单控件名称不匹配的小疏忽，咱们分分钟就能搞定～

问题核心 #

你在gallery.component.ts的ngOnInit方法里构建表单组时，第三个控件的键名写的是numberOfPictures（末尾多了个s），但在HTML模板里对应的formControlName却是numberOfPicture（没有s）：

• TS里的表单定义：

this.filterForm = this.fb.group({
  startDate: [''],
  endDate: [''],
  numberOfPictures: [''] // 这里是numberOfPictures
});

• HTML里的控件：

<mat-select formControlName="numberOfPicture"> <!-- 这里是numberOfPicture -->

Angular会严格根据formControlName的值去表单组里找对应的控件，名字对不上自然就会报错，这也解释了为什么你不管加什么类型的输入作为最后一个控件，只要名字不匹配就会触发同样的错误。

修复方案 #

只需要把TS里的表单键名改成和模板一致的即可（毕竟你的getter方法numberOfPicture也是没有s的，这样能保持统一）：

ngOnInit(): void {
  this.filterForm = this.fb.group({
    startDate: [''],
    endDate: [''],
    numberOfPicture: [''] // 把numberOfPictures改成numberOfPicture
  });
  console.log(this.startDate);
  console.log(this.endDate);
  console.log(this.numberOfPicture); // 现在这里不会输出null啦
}

改完之后，你再运行项目，这个错误应该就彻底消失了～

备注：内容来源于stack exchange，提问作者Beach Bum Bob