Angular 5 - Reactive form: Select empty option from dropdown

Question

I am working with reactive forms:

This is my form in html file:

<select class="form-group form-control" formControlName="Control{{prop.id}}" id="Control {{prop.id}}" name="Control{{prop.id}}" [required]="prop.mandatory" (change)="changeDropdown ($ event, prop.id)">
  <option value=""> Select </option>
  <option *ngFor="let data of dataMap.get (prop.id)" value="{{data.value}}">{{data.text}} </option>
</select>

From the ts file I want to select the option I need, when I do this it works perfectly:

this.formLoad.controls ['Control' + id] .setValue (1);

Now I want to select the option with the value = "" (value name: Select):

this.formLoad.controls ['Control' + id] .setValue ("");

This is not working for me, what could be the problem?

Thank you,

Maybe trying setting the value to "0" or "-1" (if 0 "0" is used). — Ruben Szekér
– Ruben Szekér, Commented Aug 9, 2020 at 10:35
Do you get any errors when trying to set to an empty string? — mchl18
– mchl18, Commented Aug 9, 2020 at 11:26

Minal Shah · Accepted Answer · 2020-08-09 11:19:25Z

You can assign some value to the option select as well. And set that value from the .ts file when you want some option to be selected. And when you want to use that data to set it in some object or something, you can just add one condition of the value should not be equal to that select.

Suppose you keep default as the value.

So update your code as below:

<select class="form-group form-control" formControlName="Control{{prop.id}}" id="Control {{prop.id}}" name="Control{{prop.id}}" [required]="prop.mandatory" (change)="changeDropdown ($ event, prop.id)">
  <option value="default"> Select </option>
  <option *ngFor="let data of dataMap.get (prop.id)" value="{{data.value}}">{{data.text}} </option>
</select>

and

this.formLoad.controls ['Control' + id] .setValue ("default");

When you use this selected option, add this.

if(selectedValue !== 'default'){
.........
}

mchl18 · Accepted Answer · 2020-08-09 11:19:30Z

1

There is a lot of code missing here to make everything works so I will make some assumptions. You might want to use reactive forms api:

this.formLoad.get('Control' + id).setValue(1);

Then you can try to set it like this:

this.form.get('Control' + id).setValue('')

This API usually gives you better control.

I tried to reproduce this with a stackblitz:

https://stackblitz.com/edit/angular-ivy-seuwh4?file=src%2Fapp%2Fapp.component.ts

answered Aug 9, 2020 at 11:19

mchl18

2,3661 gold badge16 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular 5 - Reactive form: Select empty option from dropdown

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related