#angular #angular-reactive-forms
Вопрос:
Я работаю над формой, которая динамически генерируется при нажатии кнопки. Но я не могу настроить проверку формы на нем
часть файла .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')
Может кто-нибудь, пожалуйста, помочь мне с этим. Заранее спасибо
Комментарии:
1. [FormControl]=»FormGroup.get(столбец.поле)», не уверен, определяется ли
formGroup
это в edithadler, поскольку оно вызывается в html