web-dev-qa-db-fra.com

Comment afficher l'espace réservé (option vide) dans le contrôle de sélection dans Angular 2?

J'ai ce code dans mon modèle:

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

Dans ma composante:

public selectedSubSectionId: any;

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

Cela fonctionne bien, mais au début, j'ai une boîte vide. Je souhaite y afficher un message d'espace réservé. Comment puis-je faire cela en utilisant ngModel?

angularangular2-ngmodel
21
Leantraxxx

Ma solution:

Dans le fichier TypeScript du composant, j'ajoute une propriété selectUndefinedOptionValue que je n'initialise pas et dans le html j'ajoute l'undefinedSelectOptionValue comme valeur de l'option d'espace réservé. Cette solution fonctionne pour les propriétés de modèle de nombre et de chaîne.

@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>
31
MeTTe

J'ai la même question, et j'ai trouvé un exemple dans ce grand site Web: Angular Quick Tip

aussi, je mets l'exemple ci-dessous:

// 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'}
];

Fonctionne également avec les formulaires réactifs, c'est ce que j'utilise:

// 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)
});

Merci à Netanel Basal pour fournir la réponse

11
Ricardo Martínez

Ajouter une option vide et définir sur 'non défini' peut également être ajouté pour une valeur nulle

<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>
8
Serkan KONAKCI

essayez ce code:

<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>
5
Rodion Golovushkin