Angular form checkbox not initially included in the model

Question

I am building a dynamic form that could include any number of field combinations and field types. A typical example of this might be a user registration with firstName, lastName, email and password. However also to be included on some forms would be a boolean checkbox for a field like active.

I have an empty object in my controller that will be populated by the form and then submitted. I attach ng-modelto all of the form elements as usual, these all work well until I get to the boolean field which does not get included in the model unless the user has interacted with it.

The boolean field is usually required at the server side so I want it to be checked by default, but this won't be added to the model unless you first uncheck it and check it again.

$scope.formData = {}

<div class="{{field.name}}">
    <label for={{field.name}} class="field-label">{{field.prettyName}}</label>
    <input 
        type="checkbox" 
        class="form-field boolean-checkbox" 
        id={{field.name}} 
        ng-model="formData[field.name]"
        ng-checked="true"
    /> 
</div>

So the scenarios are:

Initial page load checkbox is checked but object reads as:

{}

The user then has to uncheck the checkbox, and then recheck it and the object will read as:

{
    "active":true
}

I have also tried using ng-init="true" but no joy there.

formData[field.name] does not exist so it is going to be false. You could run it through a function and set it to true if it does not exist yet. — ajmajmajma
– ajmajmajma, Commented Apr 5, 2016 at 13:26

Community · Accepted Answer · 2017-05-23 11:59:48Z

1

I'm not sure why ngInit didn't work for you, but here's an example using it, as luk492 stated in its comment (you need to check your console logs to see it working):

angular
  .module('myApp', [])
  .controller('MainCtrl', ['$scope',
    function($scope) {
      $scope.formData = {};

      $scope.$watch(function() {
        console.log('formData', JSON.stringify($scope.formData, null, 4))
      });
    }
  ]);

<div ng-app="myApp">
  <div ng-controller="MainCtrl">
    <input type="checkbox" ng-init="formData.truthyValue = true" ng-model="formData.truthyValue">
    <input type="checkbox" ng-init="formData.falsyValue = false" ng-model="formData.falsyValue">
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>

You'll see that both truthyValue and falsyValue are added to formData regardless of their boolean value.

An important thing to note from ngChecked docs is that you shouldn't use it together with ngModel, as this can lead to unexpected behavior.

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Apr 5, 2016 at 13:40

Cosmin Ababei

7,0722 gold badges22 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dan Hodson Over a year ago

Ah thank you very much @cosmin-ababei I hadn't gone far enough with ng-init it seems as I merely had ng-init="true" rather than ng-init="formData[field.name] = true". As far as ng-checked goes, I did see in the docs that it wasn't meant to be used but without the ng-init working properly I couldn't get it to check as default. Thank you again for solving this.

marpme · Accepted Answer · 2016-04-05 13:32:00Z

1

If your form has the named Option ng-checked="true" at the start, then you could use a "constant" on the back-end. So if the form returned following data:

{ NULL }

then you could use your constant instead, because the form is on true. And if the user changed the Option, you could use the form-value instead

{
    "active":true
}

If you got any further question, don't hestitate to comment my answer. :)

answered Apr 5, 2016 at 13:32

marpme

2,4351 gold badge17 silver badges23 bronze badges

2 Comments

Dan Hodson Over a year ago

Thank you for answering @kyon, I'm a little unclear as to what you mean by using a "constant" on the back-end instead? Do you have an example?

marpme Over a year ago

@DanHodson, just use a if-clause. => if Response == NULL { check = true } else { check = form.value }

Collectives™ on Stack Overflow

Angular form checkbox not initially included in the model

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related