模板语法
服务端渲染
API / @angular/forms

SelectControlValueAccessor

Writes values and listens to changes on a select element.

在 select 元素上写入值并监听其变更。

@Directive({ selector: 'select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]', host: { '(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()' }, providers: [SELECT_VALUE_ACCESSOR] }) class SelectControlValueAccessor implements ControlValueAccessor { value: any onChange: (_: any) => { } onTouched: () => { } set compareWith: (o1: any, o2: any) => boolean writeValue(value: any): void registerOnChange(fn: (value: any) => any): void registerOnTouched(fn: () => any): void setDisabledState(isDisabled: boolean): void }

选择器

select:not([multiple])[formControlName] select:not([multiple])[formControl] select:not([multiple])[ngModel]

输入参数

compareWith 绑定到 SelectControlValueAccessor.compareWith

说明

Used by NgModel, FormControlDirective, and FormControlName to keep the view synced with the FormControl model.

由 NgModel、FormControlDirective 和 FormControlName 使用， 以保持视图与 FormControl 模型的同步。

If you have imported the FormsModule or the ReactiveFormsModule, this value accessor will be active on any select control that has a form directive. You do not need to add a special selector to activate it.

如果你已经导入了 FormsModule 或 ReactiveFormsModule，该"值访问器"（ValueAccessor）将会自动在任何具有表单指令的 select 元素上激活。 你不用添加特殊的选择器来激活它。

How to use select controls with form directives

如何与表单指令一起使用 select 控件

To use a select in a template-driven form, simply add an ngModel and a name attribute to the main <select> tag.

要在模板驱动表单中使用 select，只要把 ngModel 和 name 属性加到 <select> 标签上即可。

If your option values are simple strings, you can bind to the normal value property on the option. If your option values happen to be objects (and you'd like to save the selection in your form as an object), use ngValue instead:

如果 option 的值是字符串，那么你可以在 option 中绑定到标准的 value 属性。 如果是对象（你可能要把该选择结果作为对象存入表单中），请用 ngValue 代替：

import {Component} from '@angular/core'; @Component({ selector: 'example-app', template: ` <form #f="ngForm"> <select name="state" ngModel> <option value="" disabled>Choose a state</option> <option *ngFor="let state of states" [ngValue]="state"> {{ state.abbrev }} </option> </select> </form> <p>Form value: {{ f.value | json }}</p> <!-- example value: {state: {name: 'New York', abbrev: 'NY'} } --> `, }) export class SelectControlComp { states = [ {name: 'Arizona', abbrev: 'AZ'}, {name: 'California', abbrev: 'CA'}, {name: 'Colorado', abbrev: 'CO'}, {name: 'New York', abbrev: 'NY'}, {name: 'Pennsylvania', abbrev: 'PA'}, ]; }

In reactive forms, you'll also want to add your form directive (formControlName or formControl) on the main <select> tag. Like in the former example, you have the choice of binding to the value or ngValue property on the select's options.

在响应式表单中，你可能想把表单指令（formControlName 或 formControl）添加到 <select> 标签上。 像以前的例子中一样，你可以把候选项绑定到 option 的 value 或 ngValue 属性上。

import {Component} from '@angular/core'; import {FormControl, FormGroup} from '@angular/forms'; @Component({ selector: 'example-app', template: ` <form [formGroup]="form"> <select formControlName="state"> <option *ngFor="let state of states" [ngValue]="state"> {{ state.abbrev }} </option> </select> </form> <p>Form value: {{ form.value | json }}</p> <!-- {state: {name: 'New York', abbrev: 'NY'} } --> `, }) export class ReactiveSelectComp { states = [ {name: 'Arizona', abbrev: 'AZ'}, {name: 'California', abbrev: 'CA'}, {name: 'Colorado', abbrev: 'CO'}, {name: 'New York', abbrev: 'NY'}, {name: 'Pennsylvania', abbrev: 'PA'}, ]; form = new FormGroup({ state: new FormControl(this.states[3]), }); }

Caveat: Option selection

警告：option 选择结果

Angular uses object identity to select option. It's possible for the identities of items to change while the data does not. This can happen, for example, if the items are produced from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the second response will produce objects with different identities.

Angular 使用对象标识作为选项。条目标识可能在其实质性数据没有变化的情况发生变化。比如，如果这些条目是通过 RPC 的方式从服务端取到的，当重新执行 RPC 时，就算数据没有变化，第二个响应也会生成一些具有不同对象标识的对象。

To customize the default option comparison algorithm, <select> supports compareWith input. compareWith takes a function which has two arguments: option1 and option2. If compareWith is given, Angular selects option by the return value of the function.

要想自定义默认的选项比较算法，<select> 支持一个名叫 compareWith 的输入。 compareWith 接受一个函数，它具有两个参数：option1 和 option2。 如果指定了 compareWith，则 Angular 会根据该函数的返回值来选取一个选项。

Syntax

语法

<select [compareWith]="compareFn" [(ngModel)]="selectedCountries"> <option *ngFor="let country of countries" [ngValue]="country"> {{country.name}} </option> </select> compareFn(c1: Country, c2: Country): boolean { return c1 && c2 ? c1.id === c2.id : c1 === c2; }

Note: We listen to the 'change' event because 'input' events aren't fired for selects in Firefox and IE: https://bugzilla.mozilla.org/show_bug.cgi?id=1024350 https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4660045/

注意：我们要监听 change 事件，这是因为 input 事件不会在 Firefox 和 IE 的 select 元素上触发： https://bugzilla.mozilla.org/show_bug.cgi?id=1024350 https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4660045/

  • npm package: @angular/forms

    npm 包: @angular/forms

属性

属性名类型说明
value
onChange
onTouched
compareWith

方法

writeValue()

writeValue(value: any): void

参数

value

Type: any.

返回值

void

registerOnChange()

registerOnChange(fn: (value: any) => any): void

参数

fn

Type: (value: any) => any.

返回值

void

registerOnTouched()

registerOnTouched(fn: () => any): void

参数

fn

Type: () => any.

返回值

void

setDisabledState()

setDisabledState(isDisabled: boolean): void

参数

isDisabled

Type: boolean.

返回值

void