Array of Form does not display inside a p-table Angular

469 views Asked by At

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

0

There are 0 answers