Tutorial

Handling Checkboxes and Radio Buttons in Angular Forms

Draft updated on Invalid Date
Default avatar

By Chris on Code

Handling Checkboxes and Radio Buttons in Angular Forms

This tutorial is out of date and no longer maintained.

Introduction

AngularJS makes dealing with forms extremely easy. When it comes to two-way data-binding to the way it helps us handle form validation, Angular really helps us process forms.

We’ve written in the past on the great features of Angular in forms and how to process forms. Today will be a quick tutorial on dealing with checkboxes and radio buttons in Angular forms.

There are many different use cases for checkboxes and many different ways we can process them. We’ll take a look at the ways to bind checkboxes and radio buttons to data variables and the ways we can tweak them.

Setting Up Our Angular Form

For this tutorial, we will need 2 files. index.html and app.js. app.js will hold all of our Angular code (it won’t be much) and index.html will be where all the action happens. Let’s create our AngularJS file first.

    // app.js

    var formApp = angular.module('formApp', [])

        .controller('formController', function($scope) {

            // we will store our form data in this object
            $scope.formData = {};

        });

All we do in this file is set up our Angular application. We will also create a controller and an object to hold all of our form data.

Now let’s look at our index.html file where we will create our form and do all of our data-binding. We’ll be using Bootstrap to help speed up our stylings.

    <-- index.html -->
    <!DOCTYPE html>
    <html>
    <head>

        <!-- CSS -->
        <!-- load up bootstrap and add some spacing -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <style>
            body         { padding-top:50px; }
            form         { margin-bottom:50px; }
        </style>

        <!-- JS -->
        <!-- load up angular and our custom script -->
        <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
        <script src="app.js"></script>
    </head>

    <!-- apply our angular app and controller -->
    <body ng-app="formApp" ng-controller="formController">
    <div class="col-xs-12 col-sm-10 col-sm-offset-1">

        <h2>Angular Checkboxes and Radio Buttons</h2>

        <form>

            <!-- NAME INPUT -->
            <div class="form-group">
                <label>Name</label>
                <input type="text" class="form-control" name="name" ng-model="formData.name">
            </div>

            <!-- =============================================== -->
            <!-- ALL OUR CHECKBOXES AND RADIO BOXES WILL GO HERE -->
            <!-- =============================================== -->

            <!-- SUBMIT BUTTON (DOESNT DO ANYTHING) -->
            <button type="submit" class="btn btn-danger btn-lg">Send Away!</button>

        </form>

        <!-- SHOW OFF OUR FORMDATA OBJECT -->
        <h2>Sample Form Object</h2>
        <pre>
            {{ formData }}
        </pre>

    </div>
    </body>
    </html>

With this setup, we will now have our form ready to go with a name input. If all went according to plan, if you type into that name input, you should see your data populate in the <pre> tag below.

Checkboxes

Checkboxes are extremely common in any form. Let’s look at how Angular binds their data using ngModel. When there are many checkboxes, sometimes it can be confusing to know how to handle that data when binding it to an object.

Inside of the formData object we created, we will create another object. Let’s call this one favoriteColors and ask our user what their favorite colors are.

    ...

        <!-- MULTIPLE CHECKBOXES -->
        <label>Favorite Colors</label>
        <div class="form-group">
            <label class="checkbox-inline">
                <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red"> Red
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green
            </label>
        </div>

    ...

When a user clicks on one of the checkboxes, they will see that the formData object immediately changes. We are housing the values for our checkboxes in the formData.favoriteColors object and this is how we will pass data of our checkboxes to our server.

Processing a Change on Checkbox Click

Sometimes you will need to process something when somebody clicks a checkbox. This could be something like doing a calculation, changing some variables, or whatever data-binding things you need to do. To do this, you would create a function inside of app.js using $scope.yourFunction = function() {};. Then you would use ng-click="yourFunction()" on your checkbox to call that function.

There are many different uses for this in forms and Angular provides a very easy way to call custom functions using ng-click.

Custom Values for Checkboxes

By default, bound checkboxes will return true or false. Sometimes we want to return different values. Angular provides a great way to do this using ng-true-value and ng-false-value.

Let’s add another set of checkboxes, but this time, instead of true or false, we will use custom values.

    ...

        <!-- CUSTOM VALUE CHECKBOXES -->
        <label>Personal Question</label>
        <div class="checkbox">
            <label>
                <input type="checkbox" name="awesome" ng-model="formData.awesome" ng-true-value="ofCourse" ng-false-value="iWish">
                Are you awesome?
            </label>
        </div>

    ...

With this addition, we now have an awesome variable in our formData object. If this is set to true, the value will be ofCourse and if set to false, the value will be iWish.

Checkbox Usage

Per the official docs, here are the different things you are able to do with radio buttons:

        <input type="radio"
           ng-model="string"
           value="string"
           [name="string"]
           [ng-change="string"]
           ng-value="string">

For more information on the things you can do with checkboxes, read the Angular input[checkbox] docs.

Radio Buttons

Radio buttons are a little bit easier than checkboxes since we don’t have to store multiple values. A radio button will just be one value since you can only select one thing. Let’s add in radio boxes and see how they are data-bound.

    ...

        <!-- RADIO BUTTONS -->
        <label>Chicken or the Egg?</label>
        <div class="form-group">
            <div class="radio">
                <label>
                    <input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg">
                    Chicken
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg">
                    Egg
                </label>
            </div>
        </div>

    ...

Just like that, our radio buttons are now bound to our formData object.

Radio Button Usage

Per the official docs, here are the different things you are able to do with radio buttons:

    <input type="radio"
       ng-model="string"
       value="string"
       [name="string"]
       [ng-change="string"]
       ng-value="string">

For more information on the things you can do with radio buttons, read the Angular input[radio] docs.

Conclusion

As you can see, binding checkboxes and radio buttons using Angular is a fairly easy process. There is also a lot of flexibility when you want to change parts of your application or create specialized checkbox or radio buttons.

  • Submitting AJAX Forms: The AngularJS Way
  • AngularJS Form Validation
  • Handling Checkboxes and Radio Buttons in Angular Forms (this article)

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Chris on Code

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel