У меня есть простой компонент, содержащий только форму:
import {Component, FORM_DIRECTIVES, NgFor} from 'angular2/angular2';
@Component({
selector: 'test-component',
directives: [FORM_DIRECTIVES, NgFor],
template: `
<form class="form-inline" (ng-submit)="onSubmit()" #form="form">
<div class="form-group">
<select class="form-control"
[(ng-model)]="model.server"
ng-control="server"
#server="form"
required>
<option selected hidden>placeholder</option>
<option *ng-for="#server of servers"
[value]="server">{{ server | uppercase }}
</option>
</select>
</div>
<div class="form-group">
<input class="btn btn-primary" type="submit" value="Load"
[disabled]="!form.form.valid">
</div>
</form>
`
})
export class TestComponent {
public model: Model = new Model();
public servers: string[] = ['a', 'b', 'c'];
onSubmit(): void {
// Complicated logic.
// Reset form.
this.model.reset();
}
}
class Model {
constructor(
public server: string = ''
) { }
reset(): void {
this.server = '';
}
}
Я хочу создать "placeholder" для моего выбора, однако ng-model переопределяет выбранное свойство, которое вообще не вызывает выбранную опцию. Любые предложения? Я использую angular 2.0.0-alpha.48.