I have integrated a form into PrimeNG's turbotable to allow users to create a new entry (group) in the table located within the footer. However, the form is not being displayed as expected. Can you help me troubleshoot this issue?
<ng-template pTemplate="footer" let-columns>
<form [formGroup]="groupForm" (ngSubmit)="createGroup()">
<tr>
<td>
<button pButton type="submit" icon="pi pi-plus"
[disabled]="!groupForm.valid" pTooltip="add group"></button>
</td>
<td *ngFor="let col of columns">
<input pInputText type="text" [formControlName]="col.field">
</td>
</tr>
</form>
</ng-template>
In my component, 'col' is an array defining data such as column size and associated field of a group.
The values assigned to 'col.field' correspond to the names of controls in the FormGroup defined below:
groupForm: FormGroup = new FormGroup({
field1: new FormControl('', Validators.required),
//...
});
I opted for using a form since all fields are required for creating a new group. If you have any suggestions or improvements, please feel free to share them with me.