populateTitleMap presumes that form has a schema property.
if it doesn't, then you can't enumerate over nothing.

At some point, the add-on will have to be rewritten for Angular 2.
This will likely mark the point when it is also beneficial to move the code to Typescript.
For users of the add-on, this will hopefully mean that nothing changes at all, as typescript compiles into Javascript anyway, but the resulting javascript is less readable, and contributing to the add-on will mean a little more effort in setting up the development tools. However, as this will probably not happen until mid-2016, this will hopefully not be a very big issue by then.

Currently, ngTranslate is only a requirement for the project, but not actually used right now.
However, full translation support should not only be part of ASFDS, but the examples, as translation is not shown much around ASF examples, but still is a feature that is used by many.

I'm trying to integrate ASFDS into my project with ui-select for autocomplete and the asyncCallback to actually get the data from the server.

I noticed, that the asyncCallback gets called and the results I return, show up in the dropdown. But the filed already has a value and the ui-select will not switch to this value, once that value is in the titleMap (after asyncCallback return the results) instead it always displays the placeholder.

Is there something I can call on the formOptions passed into the asyncCallback?

The problem is, that I don't have an initial titleMap. The ui-select will be populated with values from a REST-Endpoint and initially I can only load the value that field already points to. But when I return that (name,value)-pair form asyncCallback, I get the console message: "asyncCallback items [Object, Object]", where the current value of the field is present, but the ui-select does not change from the placeholder to that value.

I tried this before with starpselect and it was working there. But with the strapselect, I'm missing the possibility for the user to type in something and then lookup values based on this input.

Any ideas?

Hello, how can I turn off loging?

Getting this error, any ideas what could be the cause?

TypeError: n[0].nodeName is undefined

There is problem with the asynchronous callbacks, and that is that there is easy way to intercept and transform the data. It is far from certain that the developer has so much control over the API that he or she can decide how the data should look.
So I propose to add an onAsyncData.

It is pretty easy to just pass on parameters from options to the relevant attributes.

I'm trying to use ASFDS to fill choices using the asyncCallback functionality. I can't figure out how to return the promise, as required. My service is not a $http service, it is using the ODataAngularResources library (https://github.com/devnixs/ODataAngularResources) to query my ASP.Net OData Web API.

Here's my form config:

        {
            'key':'CountryID',
            'type':'strapselect',
            'placeholder': 'Select country',
            'options':{
                'asyncCallback':'promiseMasterDataForEntity("Country",["ID","Name"])',
                'map' : {valueProperty: 'ID', nameProperty: 'Name'}
            }
        },

... and here's the function exposed on $scope:

            $scope.promiseMasterDataForEntity = function(entityName,fields){
                var deferred = $q.defer();

                var fetchedData = myService.getNewEntity(entityName)
                    .odata()
                    .select(fields)
                    .query(function () {
                        console.log(JSON.stringify(fetchedData, null, 4));
                       deferred.resolve(fetchedData);
                    }, function(e){
                        //failed to fetch result}
                        console.log("Failed to get result");
                        deferred.reject(e);
                    });

                return deferred;
            };

The console log for the returned response looks a bit like this:

    [
    {
        "Name": "India",
        "ID": 1
    },
    {
        "Name": "USA",
        "ID": 4
    },
    {
        "Name": "Canada",
        "ID": 5
    }
    ]

Any ideas what could be going wrong? I am stuck, need your help

finalOptions is not defined so I am requesting a change to populateTitleMap
FROM:

else if (form.options.callback) {
            form.titleMap = $scope.getCallback(form.options.callback)(form.options, search);
            $scope.finalizeTitleMap(form,form.titleMap, finalOptions)
            console.log("callback items: ", form.titleMap);
        }

TO:

else if (form.options.callback) {
            form.titleMap = $scope.getCallback(form.options.callback)(form.options, search);
            $scope.finalizeTitleMap(form,form.titleMap, form.options);
            console.log("callback items: ", form.titleMap);
        }

Hello ,
I struggled for the past 2 hours to get the ui-select working with no luck.
I followed the instructions but it keeps throwing

       Uncaught ReferenceError: angularSchemaFormDynamicSelect is not defined

But the strange is that if i add it as an inline-script from the demo page it loads but then it has other problems, something for directive injections. I am on a dead end and i cant find any schema form autocomplete search plugin at all.
I dont know but i think an async seach-autocomplete is pretty basic stuff and very useful.
Do you have any suggestions?

I have several conditions where I need to use ng-required. I was able to create my own form type I.E.

<select ng-model="$$value$$"
          ng-model-options="form.ngModelOptions"
          ng-disabled="form.readonly"
          sf-changed="form"
          class="form-control {{form.fieldHtmlClass}}"
          schema-validate="form"
          ng-options="item.value as item.name group by item.group for item in form.titleMap"
          name="{{form.key.slice(-1)[0]}}"
          ng-required="{{form.requiredCondition}}">
  </select>

could you add the ng-required to your form types specifically strapselect?

I've got a massive form that I'm developing which has a ton of ASFDS drop downs. The server side is also in development and is therefore many times offline during regular testing.

Every time the server is down, and somehow browser refresh gets triggered, I get a whole lot of alert message boxes saying 'Loading select items failed' repeatedly.

Please eliminate entirely, or convert these into console.log as they are severely irritating. I found alerts with the same message in angular-schema-form-dynamic-select.js at the following line numbers 312,326 and 338.

Hi,

I am getting the "Unexpected token $" error for the following form json. I tried with including double quotes. Do you have any working example link where I can see how it's been used?

"form":[
{
"key": "org_id",
"type": "strapselectdynamic",
"options": {
"callback": $scope.getTitlesValues()
}
}
]

The component did not read the initial model value properly.

Please leave your comments and views. How do you use ASFDS?

My form contains several selects that make use of asyncCallback. Example extract:

            {
                "key" : "CONTACT_ID",
                "type": "strapselect",
                "options": {
                    "asyncCallback": MessageRules.fetchContactOptions
                },
                "onChange" : "contactIdChanged()"
            },
            {
                "key" : "PHONE_INDEX",
                "type": "strapselect",
                "options": {
                    "asyncCallback": MessageRules.fetchContactTelephoneOptions
                },
                "condition" : (.... not relevant ....)
            },

The asynchronous callbacks for both of the above example selects make HTTP GET calls to get the name/value data. (I appreciate I could use httpGet to much simplify this, but I have a problem achieving necessary transformation using map, which I might raise in a separate issue tracker.)

The HTTP call that is made for the second select depends on the selection of the first select. For that reason, I would like the second select's asyncCallback to fire again whenever the first select is changed. I have attempted to cause this using the onChange in the first select as you can see, which broadcasts a schemaFormRedraw:

    $scope.contactIdChanged = function() {
       $timeout(function() { 
        $scope.$broadcast('schemaFormRedraw'); 
        }, 0);
    }  

This does not appear to cause ASFDS to call the asyncCallbacks to repopulate the maps. Furthermore in the console I quite often see (for example):

dynamicSelectController.populateTitleMap(key:PHONE_INDEX) : There is already a titleMap

It could be my imagination but I thought I had this working at one point, so I'm not sure if any change in the library or what I'm doing has broken it.

Is there a way I can cause the selects to refresh using a fresh GET please?

Thank you :)

This is a problem not in dynamic select, but in angular-strap.
I have reported and submitted a pull request:
mgcrea/angular-strap#1657

Is there a way to set default placeholder text? Currently it's showing "placeholders.select"

1. Implementing the remaining applicable angular schema form standard options
   
   • readonly
   • copyValueTo

Any more suggestions?

When programming using Angular, it feels natural to use stand-alone controllers, and looking around, there are a huge number of projects that use them to a large extent. (ASFDS included)

However, this type of controller(ng-controller) is going away in Angular2, and second, they are arguably bad design.

Therefore, the next step for ASFDS will soon convert the dynamicSelectController into a directive-based solution with isolate scopes that take $$value$$ as a parameter.

This will actually probably not affect the look of the code that much.

Is there a way to reload the options when we're using asyncCallback? Let's say I want to filter the GET request depending on other field that I $watch.

A bug introduced in angular-strap 2.2.0 causes the component to not work properly, instead use angular-strap 2.1.6: mgcrea/angular-strap#1587

I will soon release a minor version that excludes 2.2.0 and on from dependencies.

Hello,
I have a problem, when I include mgcrea-ngStrap i get this error, TypeError: $modal.open is not a function defined.
It looks like there is a conflict

i am using your addon to display a ui-select-multiple.
It is displayed correctly, loads the data remotely and i can select and unselect entries.

But it doesn't change the underlying ng-model.

When i inspect the element, i see that it uses "internalModel" as ng-model in the ui-select-container.

Unlike in your example, where it is the actual model (multipleDemo.colors).

What could be the reason?
Here is my config:

schema: { groups: {type: "array", items:{ type: "string"} } } };
form: {
  key: "groups", 
  type: "uiselectmultiple",
  options: {
    multiple: true, 
    httpGet: {
      url: "/taggroups/api?all"
   },
   map: {
      valueProperty: "id",
      nameProperty: "name"
  }
}

Hi,

as in angular strap select, it would be nice to define options (max-length,....) using form.options.max-length... or via a global config

$scope.populateTitleMap, which is defined in dynamicSelectController, should pass the input search value to the user defined callbacks. This would allow option filtering to happen remotely, which is a nice feature for long lists of options.

In fact, I believe this is intended behavior (perhaps just not yet implemented?) as shown by the uiselect templates, for example:

<ui-select-choices refresh="populateTitleMap(form, form.options, $select.search)"
                               refresh-delay="form.options.refreshDelay" group-by="form.options.groupBy"
                               repeat="item in form.titleMap | propsFilter: {name: $select.search, description: (form.options.searchDescriptions===true ? $select.search : 'NOTSEARCHINGFORTHIS') }">
                <div ng-bind-html="item.name | highlight: $select.search"></div>
                <div ng-if="item.description">
                    <span ng-bind-html="'<small>' + (''+item.description | highlight: (form.options.searchDescriptions===true ? $select.search : 'NOTSEARCHINGFORTHIS'))+ '</small>'"></span>
                </div>
</ui-select-choices>

I would be willing to submit a PR for this, if desirable. If so, I would like some assistance regarding the following: I believe I should modify the file src/angular-schema-form-dynamic-select.js to implement this feature, after doing so, what is the procedure to update:

• angular-schema-form-dynamic-select.js
• angular-schema-form-dynamic-select.min.js

both of these files are in the root file of the project.

Work is being done in the angular-strap_221_compat feature branch

The indication is that one cannot be compatible with both angular-strap 2.1.6 and angular-strap 2.2.1 at the same sime, so dynamic select will require ASF 0.8.0 and angular-strap 2.2.1 as a result of this bug fix.

I want to set up a chain of ASFDS drop downs and I'm not being able to figure out how to wire it up, all together.

My model on the $scope is called item. I've got an ASF form with ASFDS drop downs, the idea is that we will have chaining drop downs - when one is selected the next one will filter to match.

Take for example, this schema

{
        type: "object",
        properties: {
            ID: {type: "integer", readOnly: true, description: "Internal ID, display-only"},
            Name: {type: "string", minLength: 2, title: "Name", description: "Name or alias"},
            CityID: {type: "integer", title: 'City', description: "Postal Code belongs to this state"},
            StateID: {type: "integer", title: 'State', description: "City belongs to this state"},
            CountryID: {type: "integer", title: 'Country', description: "State belongs to this country"},
        }
    }

and this form:

form: [
        'ID',
        'Name',
        {
            'key': 'CountryID',
            'type': 'strapselect',
            'placeholder': 'Select country',
            'options': {
                'asyncCallback': 'promiseMasterDataForEntity',
                'entity': 'Country',
                'fields': ['ID', 'Name'],
                "map": {valueProperty: "ID", nameProperty: "Name"}
            }
        },
        {
            'key': 'StateID',
            'type': 'strapselect',
            'placeholder': 'Select state',
            'options': {
                'asyncCallback': 'promiseMasterDataForEntity',
                'entity': 'State',
                'fields': ['ID', 'Name', 'CountryID'],
                "map": {valueProperty: "ID", nameProperty: "Name"}
            }
        },
        {
            'key': 'CityID',
            'type': 'strapselect',
            'placeholder': 'Select city',
            'options': {
                'asyncCallback': 'promiseMasterDataForEntity',
                'entity': 'City',
                'fields': ['ID', 'Name', 'StateID'],
                "map": {valueProperty: "ID", nameProperty: "Name"}
            }
        },
      {
            name: 'SAVE', control: {
            type: "submit",
            title: "Save"
        }
    ]

When the user changes country, state should be filtered. When the user changes state, city should be filtered.
I've got all three ASFDSs showing all values, with asyncCallback fetches, all that works well. Problem is, how to do a change cascade filter?

I tried using the filter clauses, but could not get it to work. If you could provide more examples, of how to do this, or more details on the filter clauses, I would really appreciate it and make it work.

Thanks!

Is it possible to do this directly in forms:

<ui-select htmlClass="form-control" ng-model="country.selected"
theme="bootstrap"
ng-disabled="disabled"
reset-search-input="false"
style="width: 300px;">
<ui-select-match>{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="country in countries track by $index"
refresh="refreshCountries($select.search)"
refresh-delay="1000">
<div ng-bind-html="country.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>

Right now i'm using a modal window o suport this, but i could be much clean to have it in forms directly.

Currently, run-time information, only known in the scope, can be set using callbacks.
Would it be taking it too far to include the possibility to have angular expressions in the form values? Define as some kind of markup, perhaps:

Title: "For some reason we want the current user in the title: {{getUser()}}"

How should this work?
Should it be possible to drop down and select?

Hi, I'm using the strapselect or the uiselect versions and in both the UTF-8 charecters are not displayed corectly.

Is it possible to use a resource instead of "raw" http?

I've upgraded to the recomended ASF bootstrap Decorator ( https://github.com/Textalk/angular-schema-form-bootstrap ) because of some issues working inside arrays and the destroyStrategy. Now the strapselect boxes dont render inside an array if we have more then one or dont work properly if i«ve just one(doesnt write the values in the model).

If i pick one standard select box and one strapselect the form will render but the filterTriggering stops working because it wont parse the arrayIndex value and thus the functionality of having two chained select boxes populating B values depending on select A values breaks.

Bellow i will link 2 plunker demos one working with the default ASF bootstrap decorator:

http://plnkr.co/edit/Ttxb3Icql42U8v3UrlIM?p=preview

and the last one not working with the recommended ASF bootstrap decorator:

http://plnkr.co/edit/xOlkiP7iN5vYekc7Kr8i?p=preview

ps:. you can switch the first strapselect type to just select to see the form rendering but it will still not get the triggers like it should.

It's worth to mentions was having a big problem before using select boxes nested inside array and this fix mentions here:
json-schema-form/angular-schema-form#590
(props to elbunuelo)

Solved some issued until now at least with the standard ASF select box.

Hello,

Now I am able to get the drop down values from mysql db via php using url http post method. Only issue is how to pass dynamic parameter i.e. passing a scope variable's value to the middleware program in this case to php.

I have hard coded the user id within the form declaration using "parameter" but I would like to use a scope variable (without $scope in the below syntax).

For example:
"parameter": { "id" : "CURRENT_USER_ID"} // Where CURRENT_USER_ID is a scope variable.

{
  "key": "org_id",
  "type": "strapselectdynamic",
  "options": {
    "http_post": {
      "url" : "app/server/profiledata/my_organisations.php",
      "parameter": { "id" : "416d0817-43fb-11e4-9e1f-f04da275143b"}
    }
  },
  "placeholder": "Select Organisation Name",
  "htmlClass":"col-lg-4 col-md-4"
}

Hello, can I reload data (from new url), after changing url variable?

I noticed that my asyncCallback get called twice.

I think it's due to the fact that populateTitleMap is called twiced. Once for the inner form-group and once for the ui-select-choices.

I use ASF (in its standard form) to provide select menus driven from the enum property in the schema. For example:

    $scope.schema = {
        type: "object",
        title: "Animals",
        properties: {
            A_select: {
                title: "Animals",
                type: "string",
                description: "some description",
                   "enum": [
                        "Dogs", "Cats", "Fish"
                    ]
            },

...

    $scope.form = [
        {
            "key": "A_select",
            "type": "select"
        },

...

When adding in the angular-schema-form-dynamic-select library, I have to add the explicit "type": "select" property. Before adding ASFDS, the ASF library would by default imply a 'select' by the fact that the schema is a string with an enum propery. After adding ASFDS, I have to add the type property as otherwise every property (even simple string fields) become an 'empty' select that displays placeholders.select.

The main issue however is that selects' options are no longer populated using the schema's enum property. So, given the above code example, the Dogs / Cats / Fish options don't appear in the select, and it just displays placeholders.select.

To try to eliminate some mistake in my own application, I have taken the entire example at http://demo.optimalbpm.se/angular-schema-form-dynamic-select/ with all specific script versions it uses, confirmed it all worked beforehand, and then added my additional select as shown above into it. Unfortunately the result was same behaviour as above.

I was under the impression I could add ASFDS and all existing ASF code would work as before, and the new select controls would only be generated if I explicitly specified one of the new types. Is this not the case?

Hopefully this is something daft I'm doing on my part. Thank you for your efforts you put into this library!

Hi All

I am using dreamfactory for my REST API backend and I am using this code to get the promise back.

controller.js

$scope.thisfunct = function(opt){ var thisval = DreamFactory(db).getList().then(
                    function (data) {
                    return data ;
                          }); 
    return thisval;         
};

and on my form

                {
                    type : "section",
                    htmlClass : "col-xs-2",
                    items : [{
                        key: "integrationId",
                        type: "strapselect",
                         options: {
                                   "map" : {valueProperty: "id", nameProperty: "Platform"} ,  
                                    "asyncCallback":  $scope.thisfunct

                        } 
                    }]
                },

This is the error I am getting

TypeError: Cannot read property 'forEach' of undefined
    at Scope.e.finalizeTitleMap (angular-schema-form-dynamic-select.min.js:1)
    at angular-schema-form-dynamic-select.min.js:1
    at processQueue (angular.js:13292)
    at angular.js:13308
    at Scope.$eval (angular.js:14547)
    at Scope.$digest (angular.js:14363)
    at Scope.$apply (angular.js:14652)
    at done (angular.js:9734)
    at completeRequest (angular.js:9924)
    at XMLHttpRequest.requestLoaded (angular.js:9865)

When I do console.log($scope.thisfunct) I am getting a promise back with the value as the data array. What should I do I have tried every possibility.

The initial values are both displayed and still selectable in the ui-select multiple drop down.

This seems to be due to a problem in angular-ui-select:
angular-ui/ui-select#1031

How can I implement ui-select or select2 with angular-schema-form-dynamic-select, I see that select behaviour here is applied to a button, i want it to be a dropdown like ui-select or select 2.

Hi there

Is it possible to map the name property as a concatenated values? [see comment in the below code]

{
    type : "section",
    htmlClass : "col-sm-3",
    items : [{
            key : "ItemId",
            placeholder : "Please Select",
            type : "strapselect",
            options : {
                "map" : {
                    valueProperty : "id",
                    nameProperty : "Type" //<-- here can we concatenate more values ?
                },
                "asyncCallback" : vm.databaseCb,
                "db" : connectitem,
                "filter" : "IsEnabled=1",
                "type" : "filter"

            }
        }
    ]
}

Hi guys,
I'm getting to grips with your package and so far I'm really enjoying using it. However, I've been encountering a bug with the uiselect forms when incorporated in a uirouting view.

Whereby when I select an element on the dropdown menu,

http://i.imgur.com/uulNOcF.png
http://i.imgur.com/hFnIHHA.png

and change view, the element is still marked as recorded yet it's not rendered on the dropdown list even if it's still marked as valid (green tick)

http://i.imgur.com/36WsHth.png

I haven't encountered this bug when using strapselect or the classic angular-schema-form select forms.

Cheers,
Bach,

I'm trying to get UI select working but for some reason I'm getting a 404 trying to load directives/decorators/bootstrap/uiselect/uiselect.html

I can see that you're loading uiselect.html into the template cache, and I can manually get it, but I don't know what's going on when it's being rendered by angular-schema-form that means it issues a real request and I get a 404.

Hello, how can I dynamically set selected option?

Hello Nick,

Noticed that when we have a field level container formatting it seems to be ignored. Say if I have the following field level container formatting within the form properties.
"htmlClass":"col-lg-6 col-md-6". I don't see it's formatted as other fields.

Could you please have a look is there anything need to be added or updated?

A filtering functionality should be added to selectors. New options:

• filter : An expression, evaluated in the user scope, with the "item" local variable injected, "model.select==item.category"
• filterTrigger : An array of expressions triggering the filtering, "model.select"

Note on filterTrigger and why not having a watch on the expression:

1. The expression is actually a one-to-many join, and mixes two scopes in the evaluation. This might not always be handled the same by $watch.
2. Adding watches for the expression would mean having to add one watch for each item, long lists would mean a huge overhead.
3. Also, there might be use cases where triggering should be triggered by other conditions. Or not be triggered for some other reason.

Hi,

I tried to populate a uiselect depending an other uiselect.

I added this code line 270 :

    $rootScope.$watch('subcategories',function() {
             alert("ok");
             $rootScope[$scope.form.options.variable].forEach(function (item) {
             $scope.form.titleMap.push({"value": item.value, "name": item.name})
             $scope.finalizeTitleMap(form,$scope.form.titleMap, form.options);
         }
     ); 
 })

Alert was never fired

i added this code line 293 :

    else if (form.options.variable) {
        form.titleMap = [];
        $rootScope[form.options.variable].forEach(function (item) {
                form.titleMap.push({"value": item.value, "name": item.name})
            }
        );
        $scope.finalizeTitleMap(form,form.titleMap, form.options);
    }

But the uiselect box do not handle change when rootScope variable is updated.

Loading long lists from a server may take a long time, a "caching"-property should be considered.