Jak wyświetlić symbol zastępczy (opcja pusta) w kontrolce select w Angular 2?
Mam ten kod w szablonie:
<select [ngModel]="selectedSubSectionId" (ngModelChange)="onSubSectionChange($event)">
<option *ngFor="let subSection of event.subSections" [ngValue]="subSection.id">{{ subSection.name }}</option>
</select>
W moim składniku:
public selectedSubSectionId: any;
public onSubSectionChange(subSectionId: any) {
// some code I execute after ngModel changes.
}
To Działa ok, ale na początku mam puste pudełko. Chcę pokazać wiadomość zastępczą. Jak mogę to zrobić za pomocą ngModel?
5 answers
Moje rozwiązanie:
W pliku typescript komponentu dodaję właściwość selectUndefinedOptionValue, której nie inicjalizuję, a w html dodaję undefinedSelectOptionValue jako wartość opcji zastępczej. To rozwiązanie działa zarówno dla właściwości modelu liczbowego, jak i łańcuchowego.
@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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-02 11:04:56
Mam to samo pytanie i znalazłem przykład na tej wspaniałej stronie: Angular Quick Tip
Również przykład zamieszczam poniżej:
// 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'}
];
Działa również z formami reaktywnymi, tego właśnie używam:
// 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)
});
Podziękowania dla Netanel Basal za udzielenie odpowiedzi
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-07 10:48:55
Wypróbuj ten kod:
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-15 14:35:12
Add empty option and set to 'undefined' also can be add for null value too
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-02 22:02:03
Czy próbowałeś umieścić placeholder="Your placeholder string"
wewnątrz tagu select lub option?
Zakładam, że łańcuch może zostać zamieniony na zmienną, jeśli nie chcesz na stałe zakodować łańcucha w widoku.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-02 16:10:09