<ng-container formArrayName="actors">
<ng-container *ngFor="let actor of actors['controls']; let i = index">
<ng-container>
<div [formGroupName]="i">
<div >
<div >
<label >Add Existing actor </label>
<div >
<!-- I want to get the value selected from this dropdown box -->
<select >
<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.
CodePudding user response:
Please add a form control name so that it gets automatically added to the for like shown below
<select
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
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
CodePudding user response:
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