nebular: nb-select not setting default value

Sorry for my english.

I’m making an edit profile page, loading user info from a mysql database. Everything works fine except the nbselect tha must show the current user role (admin, user etc…), instead nothing is selected. The nbselect is filled correctly with the roles stored in the database, but the actual user role is not selected as default.

Here are my codes: edit-profile.component.html

<div style="margin-top: 5px">      
      Rol: {{bd_user.role}}
      <nb-select placeholder="Rol" status="info" [(selected)]="bd_user.role">          
        <nb-option *ngFor="let role of roles" [value]="rol.id">{{role.role}}</nb-option>        
      </nb-select>          
    </div>

edit-profile.component.ts

import { Component, OnInit } from '@angular/core';
import { NbAuthJWTToken, NbAuthService } from '@nebular/auth';
import { UserService } from '../../services/user.service';
//import { User } from '../../@core/data/users';
import { User } from '../../models/User';
@Component({
  selector: 'edit-profile',
  templateUrl: './edit-profile.component.html',
  styleUrls: ['./edit-profile.component.scss'],
})
export class EditProfileComponent implements OnInit {

  user = {name: '', picture: '', id: 0, role: ''};
  bd_user: User = {
    id: 0,
    user: '',
    fullname: '',
    pass: '',
    role: 0,
    email: '',
    picture: '',
  };
  roles = [];
  constructor(private authService: NbAuthService, private userService: UserService) {
    this.authService.getToken().subscribe((token: NbAuthJWTToken) => {
      this.user = token.getPayload();
      this.userService.getUser(this.user.id).subscribe(
        res => {
          this.bd_user = res as User;
          this.userService.getRoles().subscribe(
            res => {
              this.roles = res as [];
              //console.log(res);
            },
          );   
        },
      );
    });     
   }

  ngOnInit() {
    
  }

}

thanks for any help

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 14
Comments: 18

Most upvoted comments

you can set default value with the help of form control, No need of [(selected)]

data = [ { name: 'xyz', value: 'xyz' }, { name: 'abc', value: 'abc' } ];

Set value with the help of formcontrolName or ngModel

this.formName.controls.fieldName.setValue(this.data[0].value);

rbrijesh on Feb 25, 2020

Its actually very simple

we all have be doing it in all along our project just use ngModel, and assign its fixed value where you are recieving its api

<nb-select size=“medium” placeholder=“Shows Filter” [(ngModel)]=“selectedValue” (selectedChange)=“multipleSelected($event)” > <nb-option *ngFor=“let show of showData” [value]=“show”> {{show}}</nb-option>
</nb-select>

  this.http.get(environment.api_url + this.apiType + '/state').subscribe(res => {
    console.log(res);
    this.showData = res['result'];
    this.selectedValue = res['result'][0]
  },err => {
    console.log(err);
  })

also keep in mind if you have your nbSelect within formgroup and there are formControlName you can either make ngModel standalone : true

or if that doesn’t works set formControlname value by this.formName.controls.fieldName.setValue(this.data[0].value);

shout out to 🎉 @rbrijesh

kavishsoam on Jun 26, 2020

hello, I found a salution for my own. do this for your cas: after line

this.roles = res as [];
 //console.log(res);

You must redefined value of bd_user.role

nivekalara237 on Nov 14, 2019

Found my way using the same attribute on [(selected)] property and on the [(value)] inside the option list.

I think the bug is related to using different object attributes in order to display a different information by the one used to bind the nb-select element.

<nb-select *ngIf="report.assignedto" [(selected)]="report.assignedto">
  <nb-option
    *ngFor="let item of operatorList"
    (selectionChange)="assignActivity(report.activityid, item.operatorid)"
    [(value)]="item.operatorname">
    {{ item.operatorname }}
  </nb-option>
</nb-select>

It works.

backciro on Nov 7, 2019

dont work for me,

<nb-select outline fullWidth (ngModelChange)=onModelChange($event) [(ngModel)]="data" [disabled]=disabled> <nb-option *ngFor="let data of datas" [value]=data>{{data.nome}} </nb-option> </nb-select>

I have the same object in [(ngModel)] and in [value], but dont work

dev-alexandre on Jul 10, 2020

Hi,

I’m facing a similar issue. The default value is working properly as soon as the option as not updated. During the first request to fill in the options, I managed to set a selected value, however in a second request, when my options are updated, the selected value is assigned however is displayed as not.

<nb-select formControlName="unidade" placeholder="Unidade"> <nb-option *ngFor="let unidade of getKeys(unidades)" [value]="unidade"> {{ unidade }} </nb-option> </nb-select> I’m setting the selected value as: this.tarefaForm.controls.unidade.setValue(MYDEFAULTVALUE);

dantascaio on Apr 6, 2020