Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 10x 10x | import { AsyncPipe } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FieldType, FieldTypeConfig, FormlyAttributes, FormlyFieldProps } from '@ngx-formly/core';
import { FormlyFieldSelectProps, FormlySelectModule } from '@ngx-formly/core/select';
interface SelectProps extends FormlyFieldProps, FormlyFieldSelectProps {
multiple?: boolean;
compareWith?: (o1: any, o2: any) => boolean;
}
@Component({
selector: 'formly-field-select',
host: { 'class': 'field' },
template: `
@if (props.multiple) {
<select multiple
[formControl]="formControl"
[compareWith]="props.compareWith!"
[class.is-invalid]="showError"
[formlyAttributes]="field">
@if (props.options | formlySelectOptions: field | async; as opts) {
@for (opt of opts; track opt) {
@if (!opt.group) {
<option [ngValue]="opt.value" [disabled]="opt.disabled">{{ opt.label }}</option>
} @else {
<optgroup [label]="opt.label">
@for (child of opt.group; track child.value) {
<option [ngValue]="child.value" [disabled]="child.disabled">{{ child.label }}</option>
}
</optgroup>
}
}
}
</select>
} @else {
<select [formControl]="formControl"
[compareWith]="props.compareWith!"
[class.is-invalid]="showError"
[formlyAttributes]="field">
@if (props.placeholder) {
<option [ngValue]="undefined">{{ props.placeholder }}</option>
}
@if (props.options | formlySelectOptions: field | async; as opts) {
@for (opt of opts; track opt) {
@if (!opt.group) {
<option [ngValue]="opt.value" [disabled]="opt.disabled">{{ opt.label }}</option>
} @else {
<optgroup [label]="opt.label">
@for (child of opt.group; track child.value) {
<option [ngValue]="child.value" [disabled]="child.disabled">{{ child.label }}</option>
}
</optgroup>
}
}
}
</select>
}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [
ReactiveFormsModule,
AsyncPipe,
FormlySelectModule,
FormlyAttributes,
],
})
export class FormlyFieldSelect extends FieldType<FieldTypeConfig<SelectProps>> {
override defaultOptions = {
props: {
compareWith(o1: any, o2: any) {
return o1 === o2;
},
},
};
}
|