I have a p-table where inside I there is input than I want to be link with a Form. Each row have the same input and the same rules for the form.
So I have create an array of my model. Here the model :
export class AdjustSensorDiscoveryValueModel extends Model implements IModel {
constructor() {
super();
const fb = new FormBuilder();
this.form = fb.group({
coef_a: fb.control(null, [Validators.required, Validators.min(-2), Validators.max(2)]),
coef_b: fb.control(null, [Validators.required]),
coef_c: fb.control(null, [Validators.required]),
});
}
getModelValues() {
throw new Error('Method not implemented.');
}
updateModelValues?(model: any, params?: any): void {
throw new Error('Method not implemented.');
}
}
Here the code of the p-table :
<p-table [value]="sensors" dataKey="serialNumber" selectionMode="multiple" [(selection)]="selectedSensors">
...
<ng-template pTemplate="body" let-rowData let-selection let-i="rowIndex">
<tr [style]="{'font-weight': false ? 'bold' : 'normal'}">
<form [formGroup]="adjustSensorDiscoveryValueArray[i].form">
<td class="text-align-center">
<p-tableCheckbox #select [value]="rowData" [ngModel]="selection"
[ngModelOptions]="{standalone: true}" ngDefaultControl></p-tableCheckbox>
</td>
<td *ngIf="!lightVersion">{{rowData.peripheralId}}</td>
<td>{{rowData.deviceType | deviceTypeLabel | translate}}</td>
<td>{{rowData.serialNumber}}</td>
<td>
<div class="form-control-container">
<input name="coef_a" type="number" pInputText step="0.0001" (change)="rowData.coef_a=$event"
id='coef_a' formControlName='coef_a' />
<tcw-validation-error controlName='coef_a' [model]="adjustSensorDiscoveryValueArray[i]">
</tcw-validation-error>
</div>
</td>
<td>
<div class="form-control-container">
<input name="coef_b" type="number" pInputText step="0.001" (change)="rowData.coef_b=$event"
id='coef_b' formControlName='coef_b' />
<tcw-validation-error controlName='coef_b' [model]="adjustSensorDiscoveryValueArray[i]">
</tcw-validation-error>
</div>
</td>
<td>
<div class="form-control-container">
<input name="coef_c" type="number" pInputText step="0.000001" (change)="rowData.coef_c=$event"
id='coef_c' formControlName='coef_c' />
<tcw-validation-error controlName='coef_c' [model]="adjustSensorDiscoveryValueArray[i]">
</tcw-validation-error>
</div>
</td>
<td>{{rowData.certificateId}}</td>
<td *ngIf="applyCsv" styleClass="width-140px">
<button pButton (click)="onApply(rowData)" [disabled]="!select.checked"
class="submit-btn">{{'TCW.ADJUST.APPLY' | translate}}</button>
</td>
</form>
</tr>
</ng-template>...
If I delete the <form>
the <tr>
is display.
The rowData are from a server so they are asynchronous. Each time I receive a rowData I push in my array a new model. I don't have any error in the console or when I build.
Thanks for your help