web-dev-qa-db-ja.com

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を使用してこれを行うにはどうすればよいですか

angularangular2-ngmodel
21
Leantraxxx

私の解決策：

コンポーネントのTypeScriptファイルに、初期化しないプロパティ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>
31
MeTTe

私は同じ質問をして、この素晴らしいウェブサイトで例を見つけました： Angular Quick Tip

また、私は例を下に置きます：

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

Reactive Formsでも動作します、それは私が使用しているものです：

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

Netanel Basal に感謝します

11
Ricardo Martínez

空のオプションを追加して「未定義」に設定すると、null値にも追加できます

<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

このコードを試してください：

<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