linkSelectMultipleControlValueAccessor
npm Package | @angular/forms |
---|---|
Module | import { SelectMultipleControlValueAccessor } from '@angular/forms'; |
Source | forms/src/directives/select_multiple_control_value_accessor.ts |
linkOverview
@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
}
linkSelectors
select[multiple][formControlName]
select[multiple][formControl]
select[multiple][ngModel]
linkInputs
compareWith
bound to SelectMultipleControlValueAccessor.compareWith
linkDescription
The accessor for writing a value and listening to changes on a select element.
linkCaveat: 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.
linkSyntax
<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;
}
linkConstructor
constructor(_renderer: Renderer2, _elementRef: ElementRef)