Is an ion-select/ion-option wrapped into a component not possible?

(note I’m a rater newbie to Ionic/angular2/typescript)

I wanted to wrap the ion-select/ion-option duo into my own component.
(it works when dropping the ion- prefix and thus just using ordinary HTML elements select and option)
I get an error in the browser console when it’s rendered,
maybe my Component decorator is missing the directives.
(so originally my snippet did not contain the import statement and directive metadata
because I don’t know what to use as the symbol names)

  1. is it possible to wrap ion-select/ion-option into a component
  2. how are the directives named (ionSelect ?? and ionOption ??)
    And what is the file to import?

Here’s my code snippet:

import { ionSelect (?? is this the right name), ionOption (?? is this the right name) } from '????'

@Component({
  selector: 'fm-select',
  template: `<label>{{title}}</label>
             <ion-select [ngModel]="defaultOption" (change)='onChange($event)'>
                 <ion-option *ngFor="#o of options" [value]=o.key >{{ o.val }}</ion-option>
             </ion-select>
  `
  directives : [ ionSelect, ionOption]         // again here are the names
})

Here is the console log:

EXCEPTION: No value accessor for '' in [defaultOption in FmSelectCompontent@1:25]
EXCEPTION: No value accessor for '' in [defaultOption in FmSelectCompontent@1:25]
ORIGINAL EXCEPTION: No value accessor for ''
ORIGINAL STACKTRACE:
Error: No value accessor for ''
    at new BaseException (exceptions.ts:9)
    at _throwError (shared.ts:56)
    at Object.setUpControl (shared.ts:28)
    at NgModel.ngOnChanges (ng_model.ts:76)
    at AbstractChangeDetector.ChangeDetector_FmSelectCompontent_0.detectChangesInRecordsInternal (viewFactory_FmSelectCompontent:92)
    at AbstractChangeDetector.detectChangesInRecords (abstract_change_detector.ts:136)
    at AbstractChangeDetector.runDetectChanges (abstract_change_detector.ts:110)
    at AbstractChangeDetector._detectChangesInViewChildren (abstract_change_detector.ts:237)
    at AbstractChangeDetector.runDetectChanges (abstract_change_detector.ts:115)
    at AbstractChangeDetector._detectChangesInViewChildren (abstract_change_detector.ts:237)
ERROR CONTEXT:
_Context {element: ion-select, componentElement: fm-select, context: FmSelectCompontent, locals: Object, injector: Injector…}componentElement: fm-selectcontext: FmSelectCompontentelement: ion-selectexpression: "defaultOption in FmSelectCompontent@1:25"injector: Injectorlocals: Object__proto__: Object
ngOnInit
1 Like

I found Select and Option by looking into the source code:

  • ionic/ionic/components/option/option.ts
  • ionic/ionic/components/select/select.ts

Since I use the following import:
import { Select, Option } from 'ionic-angular';
and have a directives like this:
directives : [ Select, Option ]

The errors in the console are gone but the component does not show up at all …
Anybody that who can give a clue?

I have the same problem, and after testing and testing different versions of the code I reached to the conclusion that ion-select only works inside an ion-item, otherwise it is disapeared, and so are the console errors

Is this a feature or something is wrong with it?