转载自 http://www.ngui.cc/news/show-146.html
如何添加多选控件?
在 Angular 中,我们通过 <select name="***"> 方式添加多选控件。
import { Component } from '@angular/core'; @Component({
selector: 'app-root',
template: `
<form #loginForm="ngForm">
Angular版本:
<select name="version" [ngModel]="versions[0]">
<option
*ngFor="let version of versions;"
[value]="version">
{{version}}
</option>
</select>
<hr>
{{loginForm.value | json}}
</form>
`,
}) export class AppComponent {
versions = ['1.x', '2.x', '3.x'];
}
如何添加必填验证?
import { Component } from '@angular/core'; @Component({
selector: 'app-root',
styles: [`
select.ng-invalid + label:after {
content: '<-- 请选择版本!'
}
` ],
template: `
<form #loginForm="ngForm">
Angular版本:
<div>
<select name="version" [ngModel]="version" required>
<option
*ngFor="let version of versions;"
[value]="version">
{{version}}
</option>
</select>
<label></label>
</div>
<hr>
{{loginForm.value | json}}
</form>
`,
}) export class AppComponent {
versions = ['','1.x', '2.x', '3.x'];
}