How to implement an onChange function on a select box in formly with bootstrap

Question

After reading quite a few posts I decided that this ought to work:

vm.model.myChange = function(element) {
  console.log(element);
}

.. and in the vm.fields:

{
"key": "transportation",
"type": "select",
"templateOptions": {
  "label": "How do you get around in the city",
  "valueProp": "name",
  "onChange": "model.myChange()", // ADDED
  "options": [{
    "name": "Car"
  }, {
    "name": "Helicopter"
  }]
}

In practice this has no effect, i.e. my function is not called. The generated form contained no reference to my function either.

I could not find a working example of how to do this. Any suggestions?

Thx. Paul

Could you please provide [an example](http://help.angular-formly.com) of this not working? I would expect that your function would be called (though you're not calling it with any arguments, so you're not going to see anything logged to the console). — kentcdodds, Jun 26 '15 at 15:49
here we go http://jsbin.com/veqosejaja/edit?js,console,output — user1712240, Jun 26 '15 at 17:00
here you are :-) https://jsbin.com/zeyazo/edit?html,js,console,output — kentcdodds, Jun 26 '15 at 18:31
@user1712240 could you write the answer and accept it please? — Yahya KACEM, Oct 31 '15 at 17:23

score 5 · Answer 1 · answered Dec 14 '16 at 13:54

5

you can do any of these three things:

templateOptions: {
   onChange: function($viewValue, $modelValue, $scope) {
   //implement logic here
   };
}

OR

templateOptions: {
   onChange: callMe()
},
controller: function($viewValue, $modelValue, $scope) {
    $scope.callMe = function() {
    //implement logic here
    };
}

OR

    templateOptions: {
       onChange: ''
    },
    expressionProperties : {
       'templateOptions.onChange': function($viewValue, $modelValue, $scope) {
       //implement logic here
       };
   }

answered Dec 14 '16 at 13:54

MattE

1,044
1
14
34

This (the first option) did not do anything for me; I'm new to formly but I imagine it has something to do with the specific `templateOptions` available in whatever template one happens to be using? Using `change` instead of `onChange`, as shown here https://stackoverflow.com/a/59791792/2442167 did work for me. – mactyr Feb 24 '21 at 15:05

CDan mbugua · Answer 2 · 2016-02-23T11:56:21.417

One way I handled this is having my json fields served from a service.With this one can comfortably call a function.

NB:This is served from a service or a factory

var getFields = function () {
    var fields = [
        {
           "key": "transportation",
           "type": "select",
           "templateOptions": {
           "label": "How do you get around in the city",
           "valueProp": "name",
           "onChange": "function(){//Implement your logic}"
           "options": [{
                "name": "Car"
           }, {
             "name": "Helicopter"
           }]
       }
   ] 
};

How to implement an onChange function on a select box in formly with bootstrap

2 Answers2