0
# Select Options
1

2
Utilities for handling select field options with observable support, enabling dynamic option loading and transformation for select, radio, and checkbox fields.
3

4
## Capabilities
5

6
### FormlySelectOptionsPipe
7

8
Angular pipe for transforming and processing select options with support for observables, groups, and dynamic loading.
9

10
```typescript { .api }
11
/**
12
 * Pipe for processing select field options
13
 */
14
@Pipe({ 
15
  name: 'formlySelectOptions',
16
  pure: false 
17
})
18
export class FormlySelectOptionsPipe implements PipeTransform {
19
  /**
20
   * Transform options for select fields with observable support
21
   * @param options - Array of options, observable, or function returning options
22
   * @param field - Optional field configuration for context
23
   * @returns Observable of processed select options
24
   */
25
  transform(options: any, field?: FormlyFieldConfig): Observable<FormlySelectOption[]>;
26
}
27
```
28

29
**Usage Examples:**
30

31
```typescript
32
// In a custom select field component
33
@Component({
34
  selector: 'formly-field-select',
35
  template: `
36
    <select [formControl]="formControl" [formlyAttributes]="field">
37
      <option value="">{{ props.placeholder || 'Select an option' }}</option>
38
      <ng-container *ngFor="let option of props.options | formlySelectOptions:field | async">
39
        <optgroup *ngIf="option.group" [label]="option.group">
40
          <option 
41
            *ngFor="let item of option.children" 
42
            [value]="item.value"
43
            [disabled]="item.disabled">
44
            {{ item.label }}
45
          </option>
46
        </optgroup>
47
        <option 
48
          *ngIf="!option.group"
49
          [value]="option.value"
50
          [disabled]="option.disabled">
51
          {{ option.label }}
52
        </option>
53
      </ng-container>
54
    </select>
55
  `
56
})
57
export class FormlyFieldSelect extends FieldType<FieldTypeConfig<FormlyFieldSelectProps>> {}
58
```
59

60
### Static Options
61

62
```typescript
63
const fieldConfig: FormlyFieldConfig = {
64
  key: 'country',
65
  type: 'select',
66
  props: {
67
    label: 'Country',
68
    placeholder: 'Select a country',
69
    required: true,
70
    options: [
71
      { label: 'United States', value: 'US' },
72
      { label: 'Canada', value: 'CA' },
73
      { label: 'United Kingdom', value: 'GB', disabled: false },
74
      { label: 'France', value: 'FR' },
75
      { label: 'Germany', value: 'DE' }
76
    ]
77
  }
78
};
79
```
80

81
### Observable Options
82

83
```typescript
84
import { HttpClient } from '@angular/common/http';
85
import { Observable } from 'rxjs';
86
import { map } from 'rxjs/operators';
87

88
@Component({...})
89
export class DynamicSelectFormComponent {
90
  constructor(private http: HttpClient) {}
91

92
  getCountries(): Observable<FormlySelectOption[]> {
93
    return this.http.get<any[]>('/api/countries').pipe(
94
      map(countries => countries.map(country => ({
95
        label: country.name,
96
        value: country.code,
97
        disabled: !country.active
98
      })))
99
    );
100
  }
101

102
  fields: FormlyFieldConfig[] = [
103
    {
104
      key: 'country',
105
      type: 'select',
106
      props: {
107
        label: 'Country',
108
        placeholder: 'Select a country',
109
        required: true,
110
        options: this.getCountries()
111
      }
112
    }
113
  ];
114
}
115
```
116

117
### Grouped Options
118

119
```typescript
120
const fieldWithGroups: FormlyFieldConfig = {
121
  key: 'vehicle',
122
  type: 'select',
123
  props: {
124
    label: 'Vehicle Type',
125
    options: [
126
      {
127
        label: 'Cars',
128
        group: true,
129
        children: [
130
          { label: 'Toyota Camry', value: 'camry' },
131
          { label: 'Honda Accord', value: 'accord' },
132
          { label: 'BMW X5', value: 'bmw-x5' }
133
        ]
134
      },
135
      {
136
        label: 'Motorcycles',
137
        group: true,
138
        children: [
139
          { label: 'Harley Davidson', value: 'harley' },
140
          { label: 'Yamaha', value: 'yamaha' }
141
        ]
142
      }
143
    ]
144
  }
145
};
146
```
147

148
### Legacy Select Options Pipe
149

150
```typescript { .api }
151
/**
152
 * Legacy version of FormlySelectOptionsPipe for backward compatibility
153
 * @deprecated Use FormlySelectOptionsPipe instead
154
 */
155
@Pipe({ 
156
  name: 'formlySelectOptions',
157
  pure: false 
158
})
159
export class LegacyFormlySelectOptionsPipe extends FormlySelectOptionsPipe {}
160
```
161

162
## Types
163

164
### Select Option Types
165

166
```typescript { .api }
167
interface FormlySelectOption {
168
  /** Display text for the option */
169
  label: string;
170
  
171
  /** Value to be stored in the form model */
172
  value: any;
173
  
174
  /** Whether this option is disabled */
175
  disabled?: boolean;
176
  
177
  /** Group name for grouped options */
178
  group?: string;
179
  
180
  /** Child options for grouped selections */
181
  children?: FormlySelectOption[];
182
}
183

184
interface FormlySelectOptionGroup {
185
  /** Group label */
186
  label: string;
187
  
188
  /** Indicates this is a group container */
189
  group: true;
190
  
191
  /** Options within this group */
192
  children: FormlySelectOption[];
193
}
194

195
type FormlySelectOptions = (FormlySelectOption | FormlySelectOptionGroup)[];
196
```
197

198
### Field Properties for Select
199

200
```typescript { .api }
201
interface FormlyFieldSelectProps extends FormlyFieldProps {
202
  /** Options for the select field */
203
  options?: 
204
    | FormlySelectOptions
205
    | Observable<FormlySelectOptions>
206
    | ((field: FormlyFieldConfig) => FormlySelectOptions)
207
    | ((field: FormlyFieldConfig) => Observable<FormlySelectOptions>);
208
  
209
  /** Whether to allow multiple selections */
210
  multiple?: boolean;
211
  
212
  /** Placeholder text when no option is selected */
213
  placeholder?: string;
214
  
215
  /** Compare function for option values */
216
  compareWith?: (o1: any, o2: any) => boolean;
217
  
218
  /** Whether to select the first option by default */
219
  selectAllOption?: string;
220
  
221
  /** Custom option value property name */
222
  valueProp?: string;
223
  
224
  /** Custom option label property name */
225
  labelProp?: string;
226
  
227
  /** Custom option disabled property name */
228
  disabledProp?: string;
229
  
230
  /** Custom option group property name */
231
  groupProp?: string;
232
}
233
```
234

235
### Option Processing Types
236

237
```typescript { .api }
238
/**
239
 * Function type for processing options
240
 */
241
type OptionProcessor = (
242
  options: any,
243
  field: FormlyFieldConfig
244
) => Observable<FormlySelectOption[]>;
245

246
/**
247
 * Configuration for option transformation
248
 */
249
interface OptionTransformConfig {
250
  /** Property name to use for option values */
251
  valueProp?: string;
252
  
253
  /** Property name to use for option labels */
254
  labelProp?: string;
255
  
256
  /** Property name to use for disabled state */
257
  disabledProp?: string;
258
  
259
  /** Property name to use for grouping */
260
  groupProp?: string;
261
  
262
  /** Custom transform function */
263
  transform?: (item: any, index: number, array: any[]) => FormlySelectOption;
264
}
265
```
266

267
## Import
268

269
```typescript
270
import { 
271
  FormlySelectOptionsPipe,
272
  FormlySelectOption,
273
  FormlyFieldSelectProps 
274
} from '@ngx-formly/core/select';
275
```
276

277
## Module Setup
278

279
The select functionality is included in the core module:
280

281
```typescript
282
import { FormlyModule } from '@ngx-formly/core';
283

284
@NgModule({
285
  imports: [
286
    FormlyModule.forRoot()
287
  ]
288
})
289
export class AppModule {}
290
```
291

292
## Advanced Usage Examples
293

294
### Dependent Select Fields
295

296
```typescript
297
@Component({...})
298
export class DependentSelectComponent {
299
  form = new FormGroup({});
300
  model = { country: '', state: '', city: '' };
301
  
302
  fields: FormlyFieldConfig[] = [
303
    {
304
      key: 'country',
305
      type: 'select',
306
      props: {
307
        label: 'Country',
308
        placeholder: 'Select a country',
309
        required: true,
310
        options: [
311
          { label: 'United States', value: 'US' },
312
          { label: 'Canada', value: 'CA' }
313
        ]
314
      }
315
    },
316
    {
317
      key: 'state',
318
      type: 'select',
319
      props: {
320
        label: 'State/Province',
321
        placeholder: 'Select a state',
322
        required: true,
323
        options: []
324
      },
325
      expressions: {
326
        'props.options': (field: FormlyFieldConfig) => {
327
          const country = field.model?.country;
328
          if (country === 'US') {
329
            return [
330
              { label: 'California', value: 'CA' },
331
              { label: 'New York', value: 'NY' },
332
              { label: 'Texas', value: 'TX' }
333
            ];
334
          } else if (country === 'CA') {
335
            return [
336
              { label: 'Ontario', value: 'ON' },
337
              { label: 'Quebec', value: 'QC' },
338
              { label: 'British Columbia', value: 'BC' }
339
            ];
340
          }
341
          return [];
342
        }
343
      }
344
    }
345
  ];
346
}
347
```
348

349
### Custom Option Loading
350

351
```typescript
352
@Injectable()
353
export class OptionService {
354
  constructor(private http: HttpClient) {}
355

356
  loadUsers(): Observable<FormlySelectOption[]> {
357
    return this.http.get<any[]>('/api/users').pipe(
358
      map(users => users.map(user => ({
359
        label: `${user.firstName} ${user.lastName} (${user.email})`,
360
        value: user.id,
361
        disabled: !user.active
362
      })))
363
    );
364
  }
365

366
  searchUsers(query: string): Observable<FormlySelectOption[]> {
367
    return this.http.get<any[]>(`/api/users/search?q=${query}`).pipe(
368
      map(users => users.map(user => ({
369
        label: `${user.firstName} ${user.lastName}`,
370
        value: user.id
371
      })))
372
    );
373
  }
374
}
375

376
// Usage in field configuration
377
const fieldConfig: FormlyFieldConfig = {
378
  key: 'assignedUser',
379
  type: 'select',
380
  props: {
381
    label: 'Assigned User',
382
    placeholder: 'Select a user',
383
    options: this.optionService.loadUsers()
384
  }
385
};
386
```