Why can't I mark an option in Angular as selected?

Question

I have following code for my dropdown menu. How can I set a value as selected?

<div class="input-group mb-3">
  <label class="input-group-text labelDropDown" for="inputGroupSelect01">Art der
    Integration</label>
    <select class="form-select" id="inputGroupSelect01" formControlName="integrationType">
    <option value="statisch">statisch</option>
    <option value="dynamisch">dynamisch</option>
    <option value="nein">nein</option>
  </select>
</div>

I thought it will be selected if I type in the selected keyword? Why does angular not do this?

Does this answer your question? [Angular 4 - Select default value in dropdown \[Reactive Forms\]](https://stackoverflow.com/questions/47011521/angular-4-select-default-value-in-dropdown-reactive-forms) — Vikas, Nov 29 '22 at 11:06

score 2 · Answer 1 · edited Nov 29 '22 at 15:55

2

I think this work for you:
Use selected in the <option> tag

<div class="input-group mb-3">
  <label class="input-group-text labelDropDown" for="inputGroupSelect01">Art der
    Integration</label>
 <select class="form-select" id="inputGroupSelect01" formControlName="integrationType">
     <option value="statisch">statisch</option>
     <option value="dynamisch">dynamisch</option>
     <option value="nein" selected>nein</option>
  </select>
</div>

edited Nov 29 '22 at 15:55

Martijn Vissers

712
5
29

answered Nov 29 '22 at 11:05

Andriu1510

409
1
6

This wont be selected... – tobi Nov 29 '22 at 12:09
for="inputGroupSelect01">Sprach-Framework – tobi Nov 29 '22 at 14:08

MoxxiManagarm · Answer 2 · 2022-11-29T12:02:15.903

0

The selected value is defined by the formControl you bound it to. Once you give the FormControl integrationType a value, this value will be selected. If you set nein as it's value, the 3rd option neinwill be selected.

Example edit value after init

this.myFormGroup.get('integrationType').setValue('nein');

Example with value on init

this.myFormGroup = this.formBuilder.group({
      integrationType: ['nein'],
    });

edited Nov 29 '22 at 12:02

answered Nov 29 '22 at 11:07

MoxxiManagarm

8,735
3
14
43

Can you edit your question with code`? – tobi Nov 29 '22 at 11:58
the question is how do i get the selected value – tobi Nov 29 '22 at 12:10
I build my reactive forms with form builder – tobi Nov 29 '22 at 12:11
The selected value is whatever you will put instead of 'nein'. If you have an existing data, you read the value from this data and put this. – MoxxiManagarm Nov 29 '22 at 12:16
constructor( private _formBuilder: FormBuilder, public sc: SoftwareComponentsService ) { { this.inputFormAllgInfo = _formBuilder.group({ languageForm: ['', null], selectedLanguage: ['', null], copyRightInformationForm: ['', null], startUsageForm: ['', null], vendorForm: ['', null], versionForm: ['', null], statusForm: ['', null], }); } } – tobi Nov 29 '22 at 12:23
I build it like this, but don´t know how i can set the value as selected – tobi Nov 29 '22 at 12:24
You told your select-Element, that the value of the select is bound to `integrationType` with `formControlName="integrationType"`. Whatever value is hold by this formcontrol gets automatically selected. I don't see that control in your formbuilder code. – MoxxiManagarm Nov 29 '22 at 12:26
https://stackblitz.com/edit/angular-ivy-khgfqr?file=src/app/app.component.html&view=editor – tobi Nov 29 '22 at 13:56
for="inputGroupSelect01">Sprach-Framework – tobi Nov 29 '22 at 14:08
There is so much wrong in that stackblitz, can't get it to work. You miss importing reactive form, you are not calling the getFramework function (you just name it), also the url doesn't work for me. If you want the first framework to be selected, then set the value of `frameworkArray[0]` to it – MoxxiManagarm Nov 29 '22 at 14:30
I call it in the constructor – tobi Nov 29 '22 at 15:00
No, you name it, you don't call it. Calling a function would require `()` – MoxxiManagarm Nov 29 '22 at 15:02
[selected]="frameworkArray[0]" does not work for me – tobi Nov 29 '22 at 15:03
You still don't get it. Leave out the selected attribute, **it doesn't matter here** It only matters which value is hold by the **formControl** related to the select element. – MoxxiManagarm Nov 30 '22 at 07:00
can you make a example on stackblizz? – tobi Nov 30 '22 at 10:04
I dont get it.. – tobi Nov 30 '22 at 10:05

score 0 · Answer 3 · answered Nov 29 '22 at 11:10

0

Selected is an boolean parameter from the HTML Element select so you have set it to true for the specific option element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

Alternative Solutions: use selectedHTMLEl.selectedIndex

sets the selected Option by the Index of Option

answered Nov 29 '22 at 11:10

Ch1ll1_K

13
1
6

https://stackblitz.com/edit/angular-ivy-khgfqr?file=src/app/app.component.html&view=editor – tobi Nov 29 '22 at 13:56
for="inputGroupSelect01">Sprach-Framework – tobi Nov 29 '22 at 14:08

Why can't I mark an option in Angular as selected?

3 Answers3