0

Goal

Using Jhipster v5.0.1 and Angular v6.0.0

Create an input for each Object present in the list so that I can properly display it and retrieve it back in the server.

Try

 <div class="table-responsive" *ngIf="map">

        <form name="editForm" role="form" #editForm="ngForm" id="editForm">
        <table class="table table-striped table-bordered" *ngIf="arrayOfArrays">

            <thead>
            <tr>
                <th> Type Mission </th>
                <th *ngFor="let arrayOfArray of arrayOfArrays[0]"> {{arrayOfArray.jourDuMois  | date:'EEEEE d'}} </th>
            </tr>
            </thead>

            <tbody>
                <tr  *ngFor="let keyOfMap of keysOfMap ; let i= index" >
                    <td> {{keyOfMap}} </td>
                    <td *ngFor="let arrayOfArray of arrayOfArrays[i] ; let f = index "  >
                        <input class = "form-control-plaintext" name="quantite" [(ngModel)]="arrayOfArray.quantite" required pattern="(0|0.5|1)">
                        <div [hidden]="!(editForm.controls.quantite?.invalid)">
                            <small class="form-text text-danger"
                                   [hidden]="!editForm.controls.quantite?.errors?.required">
                                Le champ est requis.
                            </small>
                            <small class="form-text text-danger"
                                   [hidden]="!editForm.controls.quantite?.errors?.pattern">
                                Valeurs acceptées: 0, 0.5 ou 1
                            </small>
                        </div>
                    </td>
                </tr>
            </tbody>

        </table>

        <button class="btn btn-primary" (click)="saveDetailsForCra()" [disabled]="editForm.form.invalid || isSaving"> <fa-icon [icon]="'save'"></fa-icon> Sauver </button>
        </form>

    </div>

Issue

I don't find the way to do it.

EDIT EDIT EDIT

Using specific name for each object, it works: 

 <input class = "form-control-plaintext" name="quantite{{i}}{{f}}" [(ngModel)]="arrayOfArray.quantite" required pattern="(0|0.5|1)">

However, the errorMessages stay hidden whatever happens.. "Logical" it's not the correct name:

<div [hidden]="!(editForm.controls.quantite?.invalid)">

However, if I put the specific name: 

<div [hidden]="!(editForm.controls.quantite{{i}}{{f}}?.invalid)">

I get an error message:

Parser Error: Got interpolation ({{}}) where expression was expected at column 28 in [!(editForm.controls.quantite{{i}}{{f}}?.invalid)]

Could you help me, please?

Thanks!

Manuela CodingPadawan
  • 436
  • 1
  • 8
  • 25

1 Answers1

1

I found the solution here:

Angular2 ngModel inside ngFor (Data not binding on input)

Each input needs to have a different name so I simply added the index i and f.

Thanks.

Manuela CodingPadawan
  • 436
  • 1
  • 8
  • 25