Angular - Cannot read properties of undefined (reading errors)

I am working on a form which generates dynamically on a button click. But I am unable to setup the form validations on it

part of .html file

    <form [formGroup]="formGroups" >
        <kendo-grid [data]="gridData"
        #grid
        filterable="menu"
        [pageSize]="pageSize"    
        [pageable]="true"
        [skip]="state.skip"
        [sortable]="{
          allowUnsort: allowUnsort,
          mode: multiple ? 'multiple' : 'single'
        }"    
        [sort]="state.sort"
        [filter]="state.filter"    
        (edit)="editHandler($event)"
        (cancel)="cancelHandler($event)"
        (save)="saveHandler($event)"
        (remove)="removeHandler($event)"
        (add)="addHandler(grid)"
        [navigable]="true"
        (dataStateChange)="dataStateChange($event);">    
        
        <kendo-grid-column field="objectType" title="OBJECT" width="130">      
          <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="formGroup" let-column="column">
            <kendo-dropdownlist (valueChange)="onValueChange()" [valuePrimitive]="true" [data]="objectItems" [formControl]="formGroup.get('objectType')"></kendo-dropdownlist>
          </ng-template>      
        </kendo-grid-column> 
        
        <kendo-grid-column field="attributeDisplayName" title="CUSTOM FIELD LABEL" width="190">      
            <ng-template kendoGridEditTemplate let-column="column" let-formGroup="formGroup" >          
              <input #input (valueChange)="onValueChange()" [formControlName]="attributeDisplayName" ngDefaultControl  class="k-textbox" [formControl]="formGroup.get(column.field)">
              <div *ngIf="f.attributeDisplayName.errors" class="k-tooltip-validation">
                <div *ngIf="f.attributeDisplayName.errors.required">This is required</div>
              </div>
            </ng-template>        
        </kendo-grid-column> 
        
        </kendo-grid>      

        <div class="modal_btn_group">
            <button (click)="editRows(grid);editCustomFields();" *ngIf="!isEditClicked" class="primary float-r k-button">EDIT</button>
            <button type="button" (click)="saveRows(grid)" class="primary float-r k-button" *ngIf="isEditClicked">SAVE</button>
            
        </div>
    </form>

part of .ts file

    public formGroups: FormGroup = new FormGroup({ items: new FormArray([]) });
    public createFormGroup = (dataItem) =>
    new FormGroup({
        objectType: new FormControl(dataItem.objectType, Validators.required),
        attributeDisplayName: new FormControl(dataItem.attributeDisplayName, Validators.required),
    });  
    
    public editRows(grid: GridComponent) {
      this.isEdited = true;
      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++;
      }
    }

    public saveRows(grid: GridComponent) { 
       if (this.formGroups.invalid) {
          console.log(this.formGroups.value); 
      }
    }
    
    get f() { return this.formGroups.controls; }
    
    public editHandler({ sender, rowIndex, dataItem }) {
      this.closeEditor(sender);    
      this.formGroup = this.createFormGroup(dataItem);    
      this.editedRowIndex = rowIndex;
      sender.editRow(rowIndex, this.formGroup);
    } 

So, when I click on edit button, I am seeing errors in console like

ERROR Error: Cannot find control with unspecified name attribute

ERROR TypeError: Cannot read properties of undefined (reading 'errors')

Can somebody please help me with this. Thanks in advance