Angular form checkbox default value

Question

I've been trying to grab hold of the Angular forms applying best practices for form validations, that forced me to use the form name and have all of the models as children of it so that I can bind the formname.$valid and all the other stuff.

However I haven't been able to set predefined values to any of the form sub models as I have no access to them in the controller.

My biggest problem right now is how to check for falsy checkboxes because initially the checkbox is unchecked but there is no value, it only gets populated when clicked to change the value.

Here is my form code

  <form name="addAppForm" ng-if="creatingApp == false">

      <input type="text" placeholder="App Name" required autofocus ng-model="addAppForm.appName">

      <input icheck id="ios" type="checkbox" ng-init="addAppForm.iOS = false" ng-model="addAppForm.iOS">
       <label for="ios"><i class="icon-apple"></i> iOS {{addAppForm.iOS}}</label>

       <input icheck id="android" type="checkbox" ng-init="addAppForm.android = false" ng-model="addAppForm.android">
       <label for="android"><i class="icon-android"></i> Android {{addAppForm.android}}</label>

    <button ng-disabled="addAppForm.$invalid && (addAppForm.iOS != true && addAppForm.android != true)" type="submit" ng-click="addNewApp(addAppForm.iOS, addAppForm.android, addAppForm.appName)" class="button front-primary large radius expand">Let's GO!</button>

  </form>

The "required" directive doesn't apply to the checkboxes and I've tried initializing the model but with no luck.

Answer 1

When you add a named form like that, it is added to your controller's scope. You can access it inside the controller using the name, similar to in the HTML:

$scope.addAppForm.android;

This should evaluate to true/false any time after the form has been set up, even if it hasn't been clicked yet.

Edit: Fiddle where form is accessed in the controller.

Answer 2

I've figured out what's wrong with my code, the ng-init actually works, I just mixed up the operators here -->> ng-disabled="addAppForm.$invalid && (addAppForm.iOS != true && addAppForm.android != true)"

Should have been ng-disabled="addAppForm.$invalid || (addAppForm.iOS != true && addAppForm.android != true)"

Still the problem persists of not being able to access the form from the controller not even in the same view outside of the form.

Answer 3

I still don't understand why u have to save your data in the Formcontroller u can use a object ( here i call it 'model' ) and put all your form values inside. Your Formcontroller object ( 'addAppForm' ) has functionality and saves validation errors see here : https://docs.angularjs.org/api/ng/type/form.FormController This object is added to the scope of your Controller late in the initialisation of your Controller

see: https://docs.angularjs.org/api/ng/directive/form

Directive that instantiates FormController.

If the name attribute is specified, the form controller is published onto the current scope under this name.

Here is the way to have the form invalid if not at least one checkbox is selected

 var myApp = angular.module("myApp", []); myApp.controller("myController1", function($scope) { $scope.model = { "ios": false, "android": false }; }); 

 <div ng-app="myApp" ng-controller="myController1"> <form name="addAppForm"> <input type="text" placeholder="App Name" required autofocus ng-model="model.appName" /> <input id="ios" name="ios" type="checkbox" ng-model="model.ios" ng-required="!model.ios && !model.android" /> <label for="ios"><i class="icon-apple"></i> iOS</label> <input id="android" name="android" type="checkbox" ng-model="model.android" ng-required="!model.ios && !model.android" /> <label for="android"><i class="icon-android"></i> Android</label> <button ng-disabled="addAppForm.$invalid " type="submit" ng-click="addNewApp(model.ios, model.android, model.appName)" class="button front-primary large radius expand">Let's GO!</button> </form> </div> <script src="https://code.angularjs.org/1.3.8/angular.min.js"></script>