PrimeNG表格复选框Chrome浏览器报错：‘表单字段元素应包含id或name属性’

Hey 兄弟，我之前也碰到过这个Chrome的报错，简直是强迫症患者的噩梦😂。你说已经加了[inputId]和name但没用，其实问题出在PrimeNG的p-tableCheckbox组件上——它内部生成的原生<input>有时候不会自动把你给的name属性传递过去，或者说我们的绑定方式得调整下。

给你几个亲测有效的解决办法：

1. 用[inputProps]显式传递所有原生属性 #

这是最靠谱的方式，直接把id和name通过inputProps对象传给内部的input元素，PrimeNG会完整地把这些属性绑定上去：

<!-- 表头复选框 -->
<p-tableHeaderCheckbox 
  class="dap-recent-document-header-checkbox"
  [inputProps]="{ 
    id: 'document-table-checkbox-header',
    name: 'document-table-checkbox' 
  }"
/>

<!-- 行内复选框 -->
<p-tableCheckbox 
  class="dap-recent-document-checkbox"
  [inputProps]="{ 
    id: 'document-table-checkbox-' + document.DocumentID,
    name: 'document-table-checkbox' 
  }"
  [value]="document"
/>

这样Chrome DevTools就不会再哔哔了，因为原生input已经拿到了明确的id和name。

2. 检查PrimeNG版本，升级到较新的稳定版 #

如果你用的是比较老的PrimeNG版本，可能存在[inputId]和name属性传递的bug。比如某些5.x、6.x的版本里，p-tableCheckbox的name属性不会同步到内部input上，升级到12+的稳定版（现在都出到16了），很多这类小问题都被修复了。

3. 手动给内部input加属性（不推荐，迫不得已再用） #

如果上面的方法都不行，你可以用ViewChild或者Renderer2在组件初始化后手动给内部input设置id和name，但这种方式有点hack，尽量不用：

import { AfterViewInit, Component, ElementRef, ViewChildren, QueryList } from '@angular/core';

@Component({...})
export class YourComponent implements AfterViewInit {
  @ViewChildren('tableCheckbox') checkboxes!: QueryList<ElementRef>;

  ngAfterViewInit(): void {
    this.checkboxes.forEach((checkboxEl, index) => {
      const nativeInput = checkboxEl.nativeElement.querySelector('input');
      if (nativeInput) {
        nativeInput.id = `document-table-checkbox-${index}`;
        nativeInput.name = 'document-table-checkbox';
      }
    });
  }
}

然后在模板里给p-tableCheckbox加个模板引用变量：

<p-tableCheckbox #tableCheckbox ...></p-tableCheckbox>

为什么你之前的方法没用？ #

之前直接绑name和[inputId]，在某些场景下PrimeNG的组件只会把inputId映射到内部input的id，但name属性可能被组件忽略了——毕竟p-tableCheckbox主要是做表格行选择的，不是原生表单控件，所以官方后来加了inputProps来支持传递原生属性。

你可以先试试第一种方法，我当时就是这么解决的，秒见效！

内容来源于stack exchange