Добавить местозаполнитель для выбора тега в angular2

Ответ 1

Я получил это для работы, выполнив следующие действия:

enter code here

<div class="form-group">
  <label for="metricsType">metrics type</label>
  <select id="metricsType" class="form-control" required [(ngModel)] ="model.metrics.type">
     <option value="" disabled="true" [selected]="!model.metrics.type">--please select--</option>
     <option *ngFor="let item of metricTypes" [value]="item.value">{{item.label}}</option>
  </select>
 </div>

затем используя css ng-pristine для стилизации

select {
 border: 1px solid transparent;
  &.ng-pristine{
    font-style: italic;
    color: darken($white, 50%);
  }
}

Ответ 2

<select class="form-control" [(ngModel)]="mySelect">
<option value="-1">Placeholder text..</option>
<!-- forloop of options heres -->
</select>

Затем в вашем компоненте. this.mySelect = -1;

Ответ 3

Angular 5 Решение и с реактивными формами!

<option value="null" disabled="true" [selected]="true">Placeholder text..</option>

:)

Ответ 4

эта работа для меня

<option [ngValue]="undefined" hidden selected> please select </option>

мой ответ основан на этом ответе, и этот ответ

Ответ 5

Вот как я это делаю:

<select class="form-control" name="selectedSignierer" #selectedSignierer="ngModel" [(ngModel)]="suisseIdDetail.selectedSigniererBenutzerId" required>
  <option value="null" disabled selected>Select your option</option>
  <option *ngFor="let item of signiererCatalog.entries;" value="{{ item.id }}" >{{ item.value }}</option>
</select>
<div *ngIf="fb.submitted && showSignDefinition === true && !selectedSignierer.valid" class="validation-error">{{ 'ERROR_FIELD_REQUIRED' | translate:lang }}</div>

Ответ 6

Ниже мое решение при использовании реактивных форм

 <select formControlName="myctrlName">
        <option [disabled]="true" [selected]="true">Select Option</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>

Ответ 7

Может быть, я немного опаздываю на этот вопрос

Поскольку ответ @Thomas Watson не работает для углового 4 и вверх, поэтому это лучшее решение:

<div class="col-md-4 mb-3">
      <label for="gender">Gender</label>
      <select class="custom-select" name="gender" id="gender" #gender ="ngModel" [(ngModel)]="employee.gender" required>
                <option [ngValue]="null">Select Gender</option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
       </select>
       <div class="text-danger" *ngIf="gender.invalid && gender.touched">Gender is required</div>
 </div>

Затем в компоненте:

ngOnInit(): void {
    this.employee = new Employee();
    this.employee.gender = null;
}

Примечание. Это также работает для необходимой проверки поля

Ответ 8

@Ответ на ТОМОМ выше получил меня почти там, но [selected] игнорируется при использовании [(ngModel)]. Ответ @Baconbeastnz может работать, но он не может адресовать подтверждение формы.

Вот ответ, который я получил от сбора ответов в Интернете.

form.html

<select name="stateId" class="state" [(ngModel)]="selectedState.code" required minlength="2">
    <option *ngFor="let state of stateList" [ngValue]="state.code" [disabled]="! state.code">{{state.name}}</option>
</select>

Примечание. Я намеренно выбрал selectedState.code вместо selectedState для целей проверки формы.
Примечание2: Я решил отключить опцию "Государство" заполнителя. Примечание2: Это может быть взлом, но minlength используется для целей проверки формы и проверяет, является ли код минимальной длиной 2

stateList.ts

export const STATELIST : US_States[] =[
    {
        "name":"State",
        "code":""
    },
    {
        "name": "Alabama",
        "code": "AL"
    },
    {
        "name": "Alaska",
        "code": "AK"
    }, ...
];

Примечание. Я выбрал первую запись в качестве заполнителя, как показано ниже в

form.component.ts

stateList:US_States[] = STATELIST;
public selectedState: US_States = Object.assign({}, this.stateList[0]);

Примечание. Сначала я просто назначил selectedState = this.stateList [0], но то, что это делает, присваивается ссылкой, а не значением. Мне понадобилось Object.assign, чтобы сделать копию первой записи значения stateList. В противном случае любой выбор других значений в раскрывающемся списке будет выполнять оператор this.stateList[0] = state.code;

Ответ 9

Ниже мое решение:

export default class AppComponent {
  cityId: number = null
  ...
}

<select #chooceCity="ngModel" class="form-control" name="city [(ngModel)]="cityId" required>
  <option *ngIf="chooceCity.untouched || chooceCity.invalid" value="null" disabled selected>Choose city</option>
  <option *ngFor="let city of cities" [value]="city.id">{{city.name}}</option>
</select>

Этот код скроет местозаполнитель, как только будет выбран правильный ответ.

Ответ 10

[ngValue]="myObject.myKey"

- это то, что вы хотите.

Ответ 11

Я знаю, что опаздываю, вот как я это делаю,

initializeSelectOptions(){
 this.optionList = ['..' , '..' , '..'
  ];
 this.optionList.unshift('Select Options')
}

ngOnInit(){
 this.initializeSelectOptions();
}

В моем шаблоне

<select class='select-option' required [(ngModel)]='optionSelected' (ngModelChange)='optionChanged($event)'>
    <option class='option' *ngFor='let option of optionList' [value]="option " [disabled]="option === 'Select Options'">{{option}}</option>
</select>

Ответ 12

<select name="selectName" [ngModel]="someModelObject">
  <option [ngValue]="undefined" disabled hidden>Select item</option>
  <option *ngFor="let item of items" [ngValue]="item">item</option>
</select>

Работает для меня.

Ответ 13

Я не мог получить ни один из приведенных выше ответов, работающих на меня в Chrome 60.0.3112.113. В основном, используя value="null" или value="" в опции-заполнителе, в поле выбора осталась опция. В моих попытках значение, которое мне нужно, чтобы текст его заполнителя отображался.

компонент:

import {Component, NgModule, VERSION, OnInit } from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  templateUrl: 'app.html',
  providers: [App]
})
export class App {
  selectPlaceholder = '--select--';
  serverName: string = '';
  servers: Array = [
    {id: 1, name: 'Server 1'},
    {id: 2, name: 'Server 2'},
    {id: 3, name: 'Server 3'}
    ]
  constructor() { }

  ngOnInit() {
    this.serverName = this.selectPlaceholder;
  }

  updateServer(selection) {
    this.serverName = selection;
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

HTML:

<div class="form-group">
  <label for="name">Server Name</label>
  <select
    (change)="updateServer(selection.value)"
    type="text"
    id="name"
    name="serverName"
    class="form-control"
    #selection>
    <option
      value="{{ selectPlaceholder }}"
      selected="true"
      disabled
      hidden>{{ selectPlaceholder }}</option>
    <option 
      *ngFor="let server of servers"
      value="{{ server.name }}">{{ server.name }}</option>
  </select>
</div>
<button
  class="btn btn-primary"
  [disabled]="serverName === selectPlaceholder">Update Server
</button>

Plunker здесь: https://plnkr.co/edit/VPj86UTw1X2NK5LLrb8W

Кнопка действия отключена, пока выбранное значение не будет равно текстовому значению по умолчанию.

* Я получал ошибки с использованием ngModel (только для плунжера), поэтому я использовал функцию (change) для выбора, чтобы обновить выбранное значение.

Ответ 14

Это работало для меня в Angular 5 с использованием реактивных форм, для выпадающего списка FormControl. Ключ:

• инициализировать значение выпадающего элемента управления до [null] в TypeScript
• use [ngValue]="null" в опции-заполнителе

(или вы можете использовать 0 или отрицательное число вместо null)

.ts

this.myReactiveForm = this.formBuilder.group({
  myDropdown: [null]
})

HTML

    <form [formGroup]="myReactiveForm ">
      <div class="form-group">
        <select formControlName="myDropdown" class="form-control" (change)="doSomething($event.target.value))">
            // DO THIS:
            <option [ngValue]="null" disabled>Please Select Option</option>
            <option *ngFor="let myItem of myCollection" [value]="myItem.id">{{ myItem.label }}</option>
        </select>
      </div>  
    </form>

От https://netbasal.com/angular-quick-tip-how-to-show-a-placeholder-in-select-control-bab688f98b98

Ответ 15

<select class = "form-control"name="searchByRegion" [(ngModel)] = searchByRegion>
    <option [ngValue]="undefined" disabled>searchByRegion</option>
    <option >All</option>
    <option >Asia</option>
    <option >Europe</option>
    <option >Africa</option>
    <option >Australia</option>
</select>

this [ngValue]="undefined" is very important in 2nd line