Как показать заполнитель (пустой вариант) в элементе управления select в Angular 2?

У меня есть этот код в моем шаблоне:

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

В моем компоненте:

public selectedSubSectionId: any;

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

Это работает нормально, но в начале у меня пустая коробка. Я хочу показать там сообщение-заполнитель. Как это сделать с помощью ngModel?


angular angular2-ngmodel
person Leantraxxx    schedule 02.08.2016    source источник

Ответы (4)


arrow_upward
33
arrow_downward

Мое решение:

В файл машинописного текста компонента я добавляю свойство selectUndefinedOptionValue, которое я не инициализирую, а в html я добавляю undefinedSelectOptionValue в качестве значения параметра-заполнителя. Это решение работает как для числовых, так и для строковых свойств модели.

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

person MeTTe    schedule 23.12.2016
comment
@FranziskusKarsunke MeTTe, ребята, кто-нибудь может объяснить, как работает эта магия, пожалуйста? спасибо - person mondayguy; 19.06.2017
comment
Это не работает в Chrome версии 60.0.3112.90, которую я использую для просмотра фрагмента. - person nclarx; 12.08.2017
comment
Работает в Chrome 60.0.3112.113 с ‹option [ngValue]=null›‹/option› - person Gil; 10.09.2017
comment
Он не работает (значение или ngValue, undefined или null) с версией Chrome 61.0.3163.100, версией 62.0.3202.75 или Opera. - person Maxxx; 06.11.2017
comment
‹option [disabled]=true [hidden]=true [selected]=true›--select--‹/option› кажется, работает (проверено на вышеуказанных сборках Chrome, а также Opera и Edge. (т.е. 11 даже не покажите мою тестовую форму!) - person Maxxx; 06.11.2017
comment
Вы можете уменьшить это еще больше, поставив undefined в качестве значения вместо переменной: <option disabled hidden [value]="undefined">-- select --</option> - person RonanCodes; 27.03.2020

arrow_upward
14
arrow_downward

У меня тот же вопрос, и я нашел пример на этом замечательном веб-сайте: Краткий совет по Angular

также я привел пример ниже:

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

Также работает с реактивными формами, вот что я использую:

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

Спасибо Нетанел Базал за ответ

person Ricardo Martínez    schedule 07.09.2017
comment
Я бы рекомендовал добавить атрибут disabled к атрибуту <option>. Я проверил, что это работает в IE11. - person rynop; 01.03.2019

arrow_upward
9
arrow_downward

Добавить пустую опцию и установить значение «undefined» также можно добавить для нулевого значения.

<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>
person Serkan KONAKCI    schedule 02.05.2017
comment
Внимание: Safari и IE11 отобразят две записи с этим решением! - person Franziskus Karsunke; 25.07.2017
comment
Как насчет <option [value]="undefined || null" ... - person B2K; 19.03.2018
comment
@ B2K Я надеялся, что это сработает в Angular 11, но это не так... - person DARKGuy; 09.12.2020
comment
Другим вариантом может быть инициализация переменных вашей модели, чтобы все они были определены, поэтому штрих-код будет либо '', либо нулевым, но не неопределенным. - person B2K; 09.12.2020

arrow_upward
6
arrow_downward

попробуйте этот код:

<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>
person Rodion Golovushkin    schedule 15.11.2016