CODEWITHSUNDEEP
angularselect
Guillaume
Guillaume

Reputation: 1

How to display my select/option in Angular 14?

I can't display my select and i dont understand why. I can see it in the [inspector][1] but its not display...

First I was trying to get data from my service and it was not working, then i tried in static in the form component and it was not working to... here in the my component and the template:

import { Component, Input, OnInit } from '@angular/core';
import { Route, Router } from '@angular/router';
import { Spot} from '../spot';
import { SpotService } from '../spot.service';


@Component({
  selector: 'app-spot-form',
  templateUrl: './spot-form.component.html',
  styleUrls: ['./spot-form.component.css']
})
export class SpotFormComponent implements OnInit {
  @Input() spot: Spot;
  types: string[]= ["fdezfez", "rzefezfze", "zefdzef"]
  departements: string[] = ["fdezfez", "rzefezfze", "zefdzef"]
  isAddform: boolean;



  constructor(private spotService: SpotService, private router: Router) { }

  ngOnInit() {
    // this.types = this.spotService.getSpotTypeList();
    // this.departements = this.spotService.getDepList();
    this.isAddform = this.router.url.includes('add');
  
  }

  hasType(type: string): boolean {
    return this.spot.type.includes(type);

  }
<form *ngIf="spot" (ngSubmit)="onSubmit()" #spotForm="ngForm">
  <div class="row">
    <div class="col s8 offset-s2">
      <div class="card-panel">
        <div class="form-group">
          <label for="name">Nom</label>
          <input type="text" class="form-control" id="name" required pattern="^[a-zA-Z0-9àéèç ]{1,25}$"
            [(ngModel)]="spot.nom" name="name" #name="ngModel">

          <div [hidden]="name.valid || name.pristine" class="card-panel red accent-1">
            Le nom du Spot est requis (1-25).
          </div>

        </div>

        <div *ngIf="isAddform" class="form-group">
          <label for="name">Image</label>
          <input type="url" class="form-control" id="picture" required [(ngModel)]="spot.picture"         name="picture"
            #picture="ngModel">

          <div [hidden]="picture.valid || picture.pristine" class="card-panel red accent-1">
            L'image du spot est requise.
          </div>
        </div>
        <div class="form-group">
          <label for="type">Type</label>
          <select #type="ngModel" name='type' class="form-control" [(ngModel)]="spot.type">
            <option *ngFor="let type of types" [value]="type">{{type}}</option>
          </select>
        </div>


        <!-- <div class="form-group">
            <select  name="departement" ngModel>
              <option  *ngFor="let departement of departements" value="departement" >{{departement}}</option>
            </select>
            <label for="departement">Département</label>
    
        </div> -->


        <div class="form-group">
          <label for="localisation">localisation</label>
          <input type="number" class="form-control" id="localisation" required
            pattern="^-?([1-8]?[1-9]|[1-9]0)\\.{1}\\d{1,6}" [(ngModel)]="spot.localisation" name="localisation"
            #localisation="ngModel">
          <div [hidden]="localisation.valid || localisation.pristine" class="card-panel red accent-1">
            [latitude,longitude]
          </div>
        </div>

        <div class="divider"></div>
        <div class="section center">
          <button type="submit" class="waves-effect waves-light btn" [disabled]="!spotForm.form.valid">
            Valider</button>
        </div>

      </div>
    </div>
  </div>
</form>
<h3 *ngIf="!spot" class="center">
  <app-loader></app-loader>
</h3>

Thanks you for your help ! [1]: https://i.sstatic.net/dZ3mW.png

Upvotes: 0

Views: 697

Answers (1)

thomasgainant
thomasgainant

Reputation: 142

Well you are making your <select> select an option with a property of a bound model (spot.type) and you are generating the options available using the types property of your component. Are you sure the value of spot.type you're giving is always available within the types array?

If it is not, I am pretty sure no options will be set as selected in the browser, which means an empty <select>, which may simply mean it will not be displayed by your browser.

Also, using [value] on an option will only handle strings. Maybe use [ngValue] instead.

Upvotes: 1

Related Questions