Angular formly multicheckbox

Question

Angular formly multicheckbox

4.3k Views Asked by Ditpi At 28 April 2025 at 17:39

I have been looking for an example for 'multicheckbox' type in 'angular formly form', where the check-boxes are selected or unselected based on corresponding value in form model, when the form is loaded,but could not find any.Can some one please help me with an example?

I shall explain my exact case :

Following is my formly form.Its a multicheckbox with key as 'selectedAnswer'.Initial value for 'selectedAnswer' in the forms model is "ee,dd".But the correspondig values are not getting checked in the check box on loading the form.

[
   {
      "key":"selectedAnswer",
      "type":"multiCheckbox",
      "templateOptions":{
         "label":"fsdfsdf",
         "options":[
            {
               "name":"ee",
               "value":"ee"
            },
            {
               "name":"dd",
               "value":"dd"
            },
            {
               "name":"tg",
               "value":"tg"
            }
         ]
      }
   }
]

Please help me to fix this issue. Thanks, Deepthy.

Original Q&A

There are 5 best solutions below

**Viplock** · Answer 1

You can use this type of check box list -

Updated Answer

HTML/View

    <form novalidate>
        <formly-form model="vm.model" fields="vm.Fields" form="vm.rentalForm">
        </formly-form>
    </form>

Controller

 function MainController(province) {

        var vm = this;
         vm.model = {
        selectedAnswer: ["dd","ee"],

             };

    vm.Fields =[
   {
      "key":"selectedAnswer",
      "type":"multiCheckbox",
      "templateOptions":{
         "label":"fsdfsdf",
         "options":[
            {
               "name":"ee",
               "value":"ee"
            },
            {
               "name":"dd",
               "value":"dd"
            },
            {
               "name":"tg",
               "value":"tg"
            }
         ]
      }
   }
] }

For better understanding check this Fiddle

I have forked the plunk of Santhosh kesavan's answer for providing the better answer. Hope it will work for you.

**Santhosh kesavan** · Answer 2

click this DEMO for example

HTLM/VIEW

<form novalidate>
            <formly-form model="vm.model" fields="vm.Fields" form="vm.rentalForm">
            </formly-form>
</form>

Script Code

var vm = this;
         vm.model = {
        check1: true,
         check2:false,
         check3:false
             };
        vm.Fields = [
        {
    key: 'check1',
    type: 'checkbox',
    templateOptions: { label: '' },
    expressionProperties: {
      'templateOptions.label': function(viewValue, modelValue, scope) {
        return "check1"
      }
    }
  },{
    key: 'check2',
    type: 'checkbox',
    templateOptions: { label: '' },
    expressionProperties: {
      'templateOptions.label': function(viewValue, modelValue, scope) {
        return "check2"
      }
    }
  },{
    key: 'check3',
    type: 'checkbox',
    templateOptions: { label: '' },
    expressionProperties: {
      'templateOptions.label': function(viewValue, modelValue, scope) {
        return "check3"
      }
    }
  }

        ];

Hope this works for you.

**Ram_T** · Answer 3

Below code will give you the idea

index.html

<!doctype html>
<html lang="en" ng-app="checkBx">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-selected-production</title>
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
  <label>Check me to select: <input type="checkbox" ng-model="isSelected"></label><br/>
  <label>Check me to select: <input type="checkbox" ng-model="isSecSelected"></label><br/>
</body>
</html>

script.js

var app = angular.module('checkBx', [])
app.controller('myCtrl', ['$scope', myCtrl]);
function myCtrl($scope){
  $scope.isSelected = true;
  $scope.isSecSelected = false;
}

**yatinsingla** · Answer 4

I didn't work for me, in latest version the type has been updated. like type: multiCheckbox --> multicheckbox and options.name --> options.key

[
{
  "key":"selectedAnswer",
  "type":"multicheckbox",
  "templateOptions":{
     "label":"fsdfsdf",
     "options":[
        {
           "key":"ee",
           "value":"ee"
        },
        {
           "key":"dd",
           "value":"dd"
        },
        {
           "key":"tg",
           "value":"tg"
        }
     ]
   }
 }
]

**Priyesha yadav** · Answer 5

For nested keys like below:

{
      key: 'domains',
      templateOptions: { label: 'Domains' },
      fieldGroup: [
        {
          key: 'domainsCheckbox',
          type: 'multicheckbox',
          templateOptions: {
          options: [
              {
                key: 'Option1',
                value: 'Option1'
              },
              {
                key: 'Option2',
                value: 'Option2'
              },
            ]
          },
        }
      ]
}

You can specify the model as: model = {'domains': {'domainsCheckbox': { 'Option1': true }}};

Angular formly multicheckbox

There are 5 best solutions below

Related Questions in ANGULARJS

Related Questions in ANGULAR-FORMLY

Trending Questions

Popular # Hahtags

Popular Questions