Блог

Я работаю над формой, которая динамически генерируется при нажатии кнопки. Но я не могу настроить проверку формы на нем

часть файла .html

 lt;form [formGroup]="formGroups" gt;  lt;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);"gt;     lt;kendo-grid-column field="objectType" title="OBJECT" width="130"gt;   lt;ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="formGroup" let-column="column"gt;  lt;kendo-dropdownlist (valueChange)="onValueChange()" [valuePrimitive]="true" [data]="objectItems" [formControl]="formGroup.get('objectType')"gt;lt;/kendo-dropdownlistgt;  lt;/ng-templategt;   lt;/kendo-grid-columngt;     lt;kendo-grid-column field="attributeDisplayName" title="CUSTOM FIELD LABEL" width="190"gt;   lt;ng-template kendoGridEditTemplate let-column="column" let-formGroup="formGroup" gt;   lt;input #input (valueChange)="onValueChange()" [formControlName]="attributeDisplayName" ngDefaultControl class="k-textbox" [formControl]="formGroup.get(column.field)"gt;  lt;div *ngIf="f.attributeDisplayName.errors" class="k-tooltip-validation"gt;  lt;div *ngIf="f.attributeDisplayName.errors.required"gt;This is requiredlt;/divgt;  lt;/divgt;  lt;/ng-templategt;   lt;/kendo-grid-columngt;     lt;/kendo-gridgt;    lt;div class="modal_btn_group"gt;  lt;button (click)="editRows(grid);editCustomFields();" *ngIf="!isEditClicked" class="primary float-r k-button"gt;EDITlt;/buttongt;  lt;button type="button" (click)="saveRows(grid)" class="primary float-r k-button" *ngIf="isEditClicked"gt;SAVElt;/buttongt;    lt;/divgt;  lt;/formgt;  

часть файла .ts

 public formGroups: FormGroup = new FormGroup({ items: new FormArray([]) });  public createFormGroup = (dataItem) =gt;  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 lt; 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);  }   

Итак, когда я нажимаю на кнопку редактирования, я вижу ошибки в консоли, такие как

 ERROR Error: Cannot find control with unspecified name attribute  ERROR TypeError: Cannot read properties of undefined (reading 'errors')  

Может кто-нибудь, пожалуйста, помочь мне с этим. Заранее спасибо