HTML datalist

[astromac]

Is it possible for formly to render and correctly use a datalist element? Given the following statement placed in app.run:

formlyConfig.setType({
    name: 'datalist',
    extends: 'input',
    template: '<input class="form-control" type="text" list="{{id}}" ng-model="model[options.key]"><datalist id="{{id}}"><option ng-repeat="value in to.options" value="{{value.value}}</option></datalist>
});

And given the following formly JSON:

{
    key: 'somekey',
    type: 'datalist',
    templateOptions: {
        label: 'This is a list of URL's',
        type: 'url',
        required: true,
        options: [
            {
                value: 'http://someurl.com/'
            },
            {
                value: 'http://anotherurl.com/'
            }
        ],
        pattern: 'regex here',
        patternUrlMessage: 'Not a valid URL',
        description: 'e.g. http://url.com/',
        placeholder: ''
    },
    modelOptions: {}
}

Formly simple renders an input element and excludes the datalist part of the template. Removing ng-model="model[options.key]" out of the input element in the template allows the browser to render the datalist correctly but it obviously doesn't save the input to the Angular model.

Have I missed anything?

[ckniffen]

@astromac if you can create an example following the instructions found here. I can better assist you.

Also try the following template. That might work because the id will automatically add id to the element with the ngModel on it in your template which would make the list attribute self referential.

'<input class="form-control" type="text" list="{{id}}_list" ng-model="model[options.key]" /><datalist id="{{id}}_list"><option ng-repeat="value in to.options" value="{{value.value}}</option></datalist>'

[astromac]

@ckniffen Thank you for the reply. I tried the template example you provided to no effect. You mentioned creating an example and referenced instructions. Was there a link that you intended to provide?

[kentcdodds]

the link is: http://help.angular-formly.com

On Tue, Sep 22, 2015 at 2:24 PM astromac [email protected] wrote:

@ckniffen https://github.com/ckniffen Thank you for the reply. I tried
the template example you provided to no effect. You mentioned creating an
example and referenced instructions. Was there a link that you intended to
provide?

—
Reply to this email directly or view it on GitHub
#482 (comment)
.

• Kent C. Dodds https://twitter.com/kentcdodds

[astromac]

Done and thank you.
JS Bin
StackOverflow

[ckniffen]

This issue is being closed in favor of formly-js/angular-formly-templates-bootstrap#54