Angular select option field not displaying

Question

I'm using Angular 6.

In the component.html file, I'm using FormGroup and the select field is like

<select formControlName="mode_of_payment" type="text" id="input-mode-of-payment" class="form-control">
    <option *ngFor="let mode of modeOfPayments" [(ngValue)]="mode.id" [selected]="mode.id === amountGiven?.mode_of_payment">{{ mode.title }}</option>
</select>

The component.ts file contains

amountGiven: AmountGiven;
updateMoneyForm: FormGroup;
modeOfPayments: Array<ModeOfPaymentData>;

ngOnInit() {

  this._initializeForm();

  // Get mode of payments
  this._getModeOfPayments();
}



private _initializeForm() {
  this.updateMoneyForm = this.formBuilder.group({
    mode_of_payment: new FormControl(),
  });
}

private _getModeOfPayments() {
  this.modeOfPaymentService.list().subscribe(
    res => {
      this.modeOfPayments = res;
      this._setFormValue();
    }
  );
}

private _setFormValue() {
  this.updateMoneyForm.setValue({
    mode_of_payment: this.amountGiven.mode_of_payment,
  });
}

But this is giving select fields like

When I click on the select field, the options are pop-up but even there the selected field is not selected by default and always the first option is having a tick mark.

ibenjelloun · Accepted Answer · 2018-10-25 16:53:58Z

0

You should not use the selected directive, the reactive form will take care of that for you :

<select [formControl]="modeOfPayment">
    <option *ngFor="let mode of modeOfPayments"
    [ngValue]="mode.id">{{ mode.title }}</option>
</select>

Here is a link to a running code.

answered Oct 25, 2018 at 16:53

ibenjelloun

7,7732 gold badges34 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Anuj TBE Over a year ago

I also tried with removed [selected] but still it shows blank. Check even your example is showing blank: image.ibb.co/mNFUQq/Screenshot-2018-10-26-at-12-05-34-AM.png

ibenjelloun Over a year ago

Can you share your browse rand OS, seems like the problem comes from there not from the code.

ibenjelloun Over a year ago

The picture you shared is correct, the select has no selected value and the value is the default value. What are you expecting ?

anil Over a year ago

@AnujTBE I didn't see it is working,may I know the fix.Even I'm facing the same issue.

Bara' Hashesh · Accepted Answer · 2018-10-25 16:54:31Z

0

The problem here is that chosen a new option will not cause any changes, the TS (type script) attributes.

You need to implement the onchange action on the select tag as such.

<select formControlName="mode_of_payment" type="text" id="input-mode-of-payment" 
 class="form-control" (change)="someFunction($event)">

    <option *ngFor="let mode of modeOfPayments" [(ngValue)]="mode.id" 
    [selected]="mode.id === amountGiven?.mode_of_payment">{{ mode.title }}</option>

</select>

After which you will need to implement the function such as it changes the default selected value.

answered Oct 25, 2018 at 16:54

Bara' Hashesh

1297 bronze badges

1 Comment

Anuj TBE Over a year ago

But to show the default selected value that is set in the form in _setFormValue() function. It always shows blank.

Edward Abattam · Accepted Answer · 2021-09-07 00:36:44Z

0

Chances are it's from your css. Remove the form-control class on the select field and it's gonna display. You can write your custom css for the select field.

answered Sep 7, 2021 at 0:36

Edward Abattam

912 silver badges4 bronze badges

Collectives™ on Stack Overflow

Angular select option field not displaying

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related