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

SelectMultipleControlValueAccessor

The accessor for writing a value and listening to changes on a select element.

@Directive({ selector: 'select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]', host: { '(change)': 'onChange($event.target)', '(blur)': 'onTouched()' }, providers: [SELECT_MULTIPLE_VALUE_ACCESSOR] }) class SelectMultipleControlValueAccessor 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[multiple][formControlName] select[multiple][formControl] select[multiple][ngModel]

输入参数

compareWith 绑定到 SelectMultipleControlValueAccessor.compareWith

说明

Caveat: Options selection

Angular uses object identity to select options. 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.

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

Syntax

<select multiple [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; }

属性

属性名类型说明
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