How can I set ngOptionValue to my ng-option?

Question

So I updated my select/option code to make it searchable but now it brokes my funtion create because of it.

HTML code:

    <div class="input-group">
        <label htmlFor="categoria" class="sr-only"> Categoría:</label>
        <ng-select [disabled]="vista === vistas.DETALLE" class="custom-select w-100 my-2 form-control-lg mb-lg-0" title="category" type="text" id="cat" name="categoria" #categoria [(ngModel)]="asignatura.categoriaId"  placeholder="Categorías">
          <ng-option *ngFor="let c of categorias" name="ca" [ngValue]="c.id" >{{c.nombre}}</ng-option>
        </ng-select>
      </div>

Ts code:

comprobacion(): boolean{
    return (this.asignatura.tipo         !== undefined &&
            this.asignatura.tipo         !== ''        &&
            this.asignatura.categoriaId  !== undefined &&
            this.asignatura.codigo       !== undefined &&
            this.asignatura.codigo       !== ''        &&
            this.asignatura.descripcion  !== undefined &&
            this.asignatura.descripcion  !== ''        &&
            this.asignatura.formato      !== undefined &&
            this.asignatura.formato      !== '');
  }


  fnCrear():void{
      this.asignatura.activa = true;
      this.categoria = this.asignatura.categoria; 
      if (!this.comprobacion()) {
        this.msgError = "Por favor, rellena todos los datos necesarios.";
        return;
      }
  
      this.msgError = undefined;
      this.asignaturasService.createAsignatura(this.asignatura)
        .subscribe(res => {
          this.router.navigate(['/asignaturas']);
          this.toastr.success("Creado correctamente", this.asignatura.tipo, { progressBar: true });
        },
        err => this.toastr.error("Ha ocurrido un error al intentar registrar la asignatura."));
    }

When I had my html code with option and select instead ng-option and ng-select these were the values of the object (as you can see categoriaId has a number value), but now I obtain these values. I've been searching about this on inte.net but any clue (Im pretty new with angular and I'm SO lost with this...)

Thank you

Answer 1

The directive ngValue is not valid with the ng-select library, use value instead.

So, this:

<ng-option *ngFor="let c of categorias" name="ca" [ngValue]="c.id" >{{c.nombre}}</ng-option>

Becomes this:

<ng-option *ngFor="let c of categorias" name="ca" [value]="c.id" >{{c.nombre}}</ng-option>

Answer 2

if you use ng-select for angular 2+, you should should the attribute bindValue. moreover, if you want to use a custom template with option. you should use ng-template like this.

       <ng-select [items]="statusItems" bindLabel="title" bindValue="value">
        <ng-template ng-option-tmp let-item="item">
          <span>{{item.title}}</span>
        </ng-template>
      </ng-select>