Search code examples
javascriptjqueryangularjsangular-schema-form

How to handle onChange with Angular Schema Form Checkbox boolean?


I can't seem to get this onChange event to fire. I have added the method to the code as per the documentation but nothing is happening.

 $scope.schema = {
"type": "object",
"title": "Comment",
"properties": {
  "comment": {
    "type": "array",
    "items": {
      "type": "object",
      "properties": {
        "name": {
          "type": "boolean",
          "title": "Name"
        },
        "eligible": {
          "type": "boolean",
          "title": "Eligible for awesome things"
        },
        "code": {
          "type":"boolean",
          "title": "The Code"
        }
      }
    }
  },
  "comment2": {
    "type": "boolean",
    "title": "Name"
  }
},
"required": [
  "comment"
]
};


$scope.form = [
{
  key: "comment",
  onChange: function(model, form){
    console.log('got there though');
  }
},
{
 type: "boolean",
 onChange: function(model, form){
   console.log('this');
 }
},
{
  type: "submit",
  title: "Save"
}
];

$scope.model = {};

Check out this plunker: http://plnkr.co/edit/XJGuPYPBDc7520vjWtbI?p=preview


Solution

  • Figured this one out Friday. I need to reference each property by key in the form definition.

    Reference the updated plunker: http://plnkr.co/edit/XJGuPYPBDc7520vjWtbI?p=preview

     $scope.form = [
    {
      key: 'comment',
      add: null,
      remove: null,
      title: false,
      notitle: true,
      items: 
      [
        {
          key: "comment.name",
          title: 'This',
          type: 'boolean',
          onChange: function(model, form){
            alert('got there ' + model.toString());
          }
        },
         {
          key: "comment.elgible",
          title: 'This',
          type: 'boolean',
          onChange: function(model, form){
            alert('got there though');
          }
        },
         {
          key: "comment.code",
          title: 'This',
          type: 'boolean',
          onChange: function(model, form){
            alert('got there though');
          }
        },
        ]
    },
    
    {
      type: "submit",
      title: "Save"
    }
    ];