How can my select box has an option value selected?

Question

Hi I am having a reactive form. I am having a select box in my component html. I want my select box to choose one of the options as default selected . Any idea what should i do ?

also i am using angular 5

so here is my form

this.formGroup = this.fb.group({
      inventories: this.fb.array([]),
      flightRates: this.fb.array([]),
      settings: this.fb.array([]),
      tagonSettings: this.fb.array([])
    });

my form group uses form arrays. In the tagonSettings form array i am pushing some form group

 this.globalTagonSettingsArray.push(
      new FormGroup({
          id : new FormControl( globalTagonSetting.id ),
          tagonText: new FormControl(globalTagonSetting.tagonText, [Validators.required] ),
          tagonType: new FormControl(globalTagonSetting.tagonType, [Validators.required] )
        }
      )
    );

in my html code below i have a select box . i want one of the options to be default selected based on the value of the formcontrol "tagonText" . any idea what should i do ?

    <div formArrayName="tagonSettings">
       <div class="row" *ngFor="let tagonSettingFormGroup of globalTagonSettingsArray.controls; let i = index">
   <div [formGroup]="tagonSettingFormGroup" >
       <div class="input-group">
           <input formControlName="tagonText">
              <select [formControlName]="tagonType">
                 <option *ngFor="let tagon of tagOns" [value]="tagon.code"> {{ tagon.code }} </option>
              </select>
               </div>
    </div>

            </div>
        </div>

Possible duplicate of [How to set value to form control in Reactive Forms in Angular](https://stackoverflow.com/questions/55275025/how-to-set-value-to-form-control-in-reactive-forms-in-angular) — wentjun, Nov 06 '19 at 17:49
not a duplicate. this is a different scenario. this is not the basic scenario . in this scenario i have form group added to form array. these form group can be deleted or added. how ever i need a way to get it selected . — KnowledgeSeeker001, Nov 06 '19 at 17:49

score 1 · Accepted Answer · answered Nov 06 '19 at 17:39

1

Give you a [value] property and set it equal to the value of the . Would look something like this:

<select [value]=1>
  <option value=1>1</option>
  <option value=2>2</option>
</select>

answered Nov 06 '19 at 17:39

Viktor Garba

303
2
5

score 1 · Answer 2 · answered Nov 06 '19 at 17:44

If you already know which index, then you can use that index number on option like below :

 <select [(ngModel)]="model.xyz">
              <option [value]=0 selected>-- Select --</option>
              <option *ngFor="let opt of optTypes" [value]="opt.id">
                {{opt.name}}
              </option>
    </select>

score 1 · Answer 3 · answered Nov 06 '19 at 17:47

1

You use set default value when you create form like Set default value while create form control

  name = new FormControl(1);

use this control in html

  <select  [formControl]='name'> <option value=1>1</option><option value=2>2</option>

answered Nov 06 '19 at 17:47

Jitendra

286
1
2
7

How can my select box has an option value selected?

3 Answers3