navigationend - ¿Cómo mostrar el marcador de posición(opción vacía) en el control de selección en Angular 2?

router events subscribe angular 4

Question

Tengo este código en mi plantilla:

<select [ngModel]="selectedSubSectionId" (ngModelChange)="onSubSectionChange($event)">
  <option *ngFor="let subSection of event.subSections" [ngValue]="subSection.id">{{ subSection.name }}</option>
</select>

En mi componente:

public selectedSubSectionId: any;

public onSubSectionChange(subSectionId: any) {
  // some code I execute after ngModel changes.
}

Esto funciona bien, pero al principio tengo una caja vacía. Quiero mostrar un mensaje de marcador de posición allí. ¿Cómo puedo hacer esto usando ngModel?

Answer 1

¿Ha intentado colocar el placeholder="Your placeholder string" dentro de la etiqueta de selección o de opción?

Supongo que la cadena se puede reemplazar con una variable si no desea codificar la cadena en su vista.

Answer 2

Agregar opción vacía y establecer en ''no definido'' también se puede agregar para un valor nulo también

<select [(ngModel)]="barcode">
  <option value="undefined" disabled selected hidden>Select</option>
  <option value="null" disabled selected hidden>Select</option>
  <option *ngFor="let city of turkiye" [ngValue]="city.id">{{city.name}}</option>
</select>

Answer 3

Mi solución:

En el archivo mecanografiado de componentes, agrego una propiedad selectUndefinedOptionValue que no inicializo y en el html agrego undefinedSelectOptionValue como valor de la opción de marcador de posición. Esta solución funciona tanto para el número como para las propiedades del modelo de cadena.

@Component({
  selector: ''some-component-selector'',
  templateUrl:''url to template'',
})
export class SomeComponent implements OnInit {
    private selectUndefinedOptionValue:any;
    private someObject:SomeObject;
    
    ngOnInit() {
      someObject = new SomeObject();
    }
}

<select [(ngModel)]="someObject.somePropertyId">
  <option disabled hidden [value]="selectUndefinedOptionValue">-- select --</option>
  <option *ngFor="let option of options" [value]="option.id">option.text</option>
</select>

Answer 4

Tengo la misma pregunta y encontré un ejemplo en este gran sitio web: Angular Quick Tip

Además, pongo el siguiente ejemplo:

// template
<form #f="ngForm">
  <select name="state" [ngModel]="state">
    <option [ngValue]="null">Choose a state</option>
    <option *ngFor="let state of states" [ngValue]="state">
      {{ state.name }}
    </option>
  </select>
</form>

//component
state = null;

states = [
  {name: ''Arizona'', code: ''AZ''},
  {name: ''California'', code: ''CA''},
  {name: ''Colorado'', code: ''CO''}
];

También funciona con las formas reactivas, eso es lo que estoy usando:

// template
<div class="form-group">
  <select formControlName="category">
    <option [ngValue]="null">Select Category</option>
    <option *ngFor="let option of options" 
            [ngValue]="option">{{option.label}}</option>
  </select>
</div>

// component
options = [{ id: 1, label: ''Category One'' }, { id: 2, label: ''Category Two'' }];

form = new FormGroup({
  category: new FormControl(null, Validators.required)
});

Gracias a Netanel Basal por dar la respuesta.

Answer 5

prueba este código:

<select [ngModel]="selectedSubSectionId? selectedSubSectionId : ''''" (ngModelChange)="onSubSectionChange($event)">
   <option value="" disabled selected hidden>Placeholder</option>
   <option *ngFor="let subSection of event.subSections" [value]="subSection.id">{{ subSection.name }}</option>
</select>