How to get the selected value from a dropdown box in a formarray

user_10523566 0
Viewed 39

<ng-container formArrayName="actors">
   <ng-container *ngFor="let actor of actors['controls']; let i = index">
      <ng-container>
        <div [formGroupName]="i">

          <div class="container mt-3">
            <div class="row justify-content-center">
               <label class="col-3 mt-2 text-end">Add Existing actor </label>
                  <div class="col-6" >
 
                    <!-- I want to get the value selected from this dropdown box -->
                    <select class="form-select form-select-sm d-flex justify-content-center">
                       <option *ngFor="let actor of existingActors" >
                             {{actor.firstName}} {{actor.lastName}}
                       </option>
                    </select>

I would like to get the user-selected value from a dropdown box in a form array. But when I use ngModel, it gives me an error. How do i get the value from the dropdown box without looping through the entire array in my TS file.

angular javascript
2 Answers

Please add a form control name so that it gets automatically added to the for like shown below

<select class="form-select form-select-sm d-flex justify-content-center" 
formControlName="<<insert the form control name here>>" // <-changed here
>
                       <option *ngFor="let actor of existingActors" >
                             {{actor.firstName}} {{actor.lastName}}
                       </option>
                    </select>

Then in the TS you can access the full values by doing this.formGroup.value.

If you want to act based on the latest selection you can do

<select class="form-select form-select-sm d-flex justify-content-center" 
formControlName="<<insert the form control name here>>" (change)="eventChange($event)"// <-changed here
>
                       <option *ngFor="let actor of existingActors" >
                             {{actor.firstName}} {{actor.lastName}}
                       </option>
                    </select>

ts

eventChange(e) {
    console.log(e.target.value);
  }

Working example

stackblitz

user_59245620

You can has a FormArray of FormControls or a FormArray of FormGroup. (Well, you can also to have a FormArray of FormArray to manage multi-dimension arrays, but it's not about your question)

If you can get an array of "simple variables", e.g. [1,2,3] or ["a","b","b"] you use a FormArray of FormControls, if you can get an array of objects, e.g. [{id:1},{id:2}..] you need a FormArray of FormGroups

A FormArray of FormGroup you use the way

<div formArrayName="actors">
   <div *ngFor="let group of actors.controls;let i=index"
        [formGroupName]="i">
        <input formControlName="id">
   </div>
</div>

See that in this case you use [formGroupName]="i" and inside formControlName

A FormArray of FormControls you use the way

<div formArrayName="actors">
   <div *ngFor="let control of actors.controls;let i=index">
        <input [formControlName]="i">
   </div>
</div>

See that in this case you use in the own input [formControlName]="i"

Well, when we has a select is equal than an input

If it's a FormArray of FormGroups

<div formArrayName="actors">
   <div *ngFor="let group of actors.controls;let i=index"
        [formGroupName]="i">

        <select formControlName="id">
          <option *ngFor="let actor of existingActors" [value]="actor.id" >
               {{actor.firstName}} {{actor.lastName}}
          </option>
        </select>

   </div>
</div>

If it's an array of FormControls

<div formArrayName="actors">
   <div *ngFor="let control of actors.controls;let i=index">

        <select [formControlName]="i">
          <option *ngFor="let actor of existingActors" [value]="actor.id" >
               {{actor.firstName}} {{actor.lastName}}
          </option>
        </select>

   </div>
</div>

But be careful!! what do you want store in your FormControl?. For this is the directive [value] in option. If you want to store a property of your array actors, in the e.g. I imagine your actors has a property "id" you use [value]="actor.id", but you can store the "whole object actor", the you use [ngValue]="actor".

An advertisment about store the whole object. You can store in a FormControl an object independiently if is a formArray of FormControls or a FormArray of formGroup. In the first case you get some like formArray:[{id:..,first:name:..},{id:..,first:name:..},]and in the second one formArray:[id:{id:..,first:name:..},id:{id:..,first:name:..},]

Futhermore, if you store the whole object you need take care when assign a value and when compare value

user_85581860
Related