Angular 6 - Create different inputs for each Object retrieved from an array itself retrieved from another array

Question

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 · Accepted Answer · 2018-09-13 14:12:08Z

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.

answered Sep 13, 2018 at 14:12

Manuela CodingPadawan

4962 gold badges9 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manuela CodingPadawan Over a year ago

This also works: [ngModelOptions]="{standalone: true}" in the input

Manuela CodingPadawan Over a year ago

Yeah, but now I have a problem with the [hidden] for the error Messages. It doesn't accept the new names... [hidden]="!(editForm.controls.quantite{{i}}{{f}}?.invalid)". Do you have an idea?

Collectives™ on Stack Overflow

Angular 6 - Create different inputs for each Object retrieved from an array itself retrieved from another array

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related