Angular动态Kendo Grid表单校验无法读取undefined的errors属性求助

报错原因分析 #

两个报错分别对应两个代码问题：

• Cannot find control with unspecified name attribute：输入框同时绑定了[formControlName]和[formControl]两个冲突的表单指令，且[formControlName]绑定的变量不存在
• Cannot read properties of undefined (reading 'errors')：你的全局formGroups结构是{ items: FormArray }，get f()返回的formGroups.controls只有items属性，不存在attributeDisplayName属性，读取自然返回undefined

具体修改步骤 #

1. 修改HTML模板代码 #

找到attributeDisplayName列的编辑模板部分，做两处修改：

<kendo-grid-column field="attributeDisplayName" title="CUSTOM FIELD LABEL" width="190">      
    <ng-template kendoGridEditTemplate let-column="column" let-formGroup="formGroup" >          
      <!-- 删除多余的[formControlName]="attributeDisplayName"属性，避免指令冲突 -->
      <input #input (valueChange)="onValueChange()" ngDefaultControl  class="k-textbox" [formControl]="formGroup.get(column.field)">
      <!-- 校验提示直接从当前行的formGroup取控件，加可选链避免空值报错 -->
      <div *ngIf="formGroup.get('attributeDisplayName')?.errors" class="k-tooltip-validation">
        <div *ngIf="formGroup.get('attributeDisplayName')?.errors?.required">This is required</div>
      </div>
    </ng-template>        
</kendo-grid-column>

2. 可选优化TS代码 #

editRows方法每次调用前先清空FormArray，避免多次点击编辑重复堆积表单控件：

public editRows(grid: GridComponent) {
  this.isEdited = true;
  // 先清空现有表单数组
  (this.formGroups.get('items') as FormArray).clear();
  let currentRow = 0;
  let rows: any = this.gridData.data;  
  for (let i = 0; i < rows.length; i++) {
    const formGroup = this.createFormGroup(rows[i]);
    (this.formGroups.get('items') as FormArray).push(formGroup);        
    grid.editRow(currentRow, formGroup, {skipFocus: true});
    currentRow++;
  }
}

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