Search code examples
javascriptangularjsangular-schema-form

How to create angular schema form checklist of checkboxes?


Not quite sure how to get this list to render. I am trying to create a form of checkboxes created from custom objects.

This is my first time using angular-schema-form but I am getting no luck here.

Here is my plunker.

var app = angular.module('plunker', ['ngSanitize', 'schemaForm']);

app.controller('MainCtrl', function($scope) {
  $scope.schema = {
    "type": "object",
    "title": "Comment",
    "properties": {
      "comment": {
        "type": "checkboxes"
      }
    },
    "required": [
      "comment"
    ]
  };

  $scope.form = [
    {
      key: "comment",
      type: "checklist",
      titleMap: [{value: "1", name: "First"}]
    }
  ];

  $scope.model = {
    "name": "Jon Snow"
  };
});

Solution

  • There is no checkboxes field type. But there are two options to define a few checkboxes:

    1. Usage of boolean field type
    2. Usage of array field type by specifying items array.

    I updated your code:

    $scope.schema = {
      "type": "object",
      "title": "Comment",
      "properties": {
        "comment": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "first": {
                "type": "boolean",
                "title": "First Checkbox"
              },
              "second": {
                "type": "boolean",
                "title": "Second Checkbox"
              },
              "third": {
                "type":"boolean",
                "title": "Third Checkbox"
              }
            }
          }
        },
        "comment2": {
          "type": "boolean",
          "title": "Standalone Checkbox"
        }
      }
    };
    
    $scope.form = [
      "*",
      {
        type: "submit",
        title: "Save"
      }
    ];
    
    $scope.model = {};
    

    To have some checkboxes checked by default, you can use the corresponding property names as follows:

    $scope.model = {
      comment2: true,
      comment: [{
        second: true
      }]
    };
    

    For more details please look at the plunker.