角形复选框默认值

Question

我一直在尝试使用Angular表单，将最佳实践应用于表单验证，这迫使我使用表单名称并将所有模型都作为它的子代，以便我可以绑定formname。$ valid和所有其他的东西。

但是我无法为任何表单子模型设置预定义的值，因为我无法在控制器中访问它们。

我现在最大的问题是如何检查伪造的复选框，因为最初该复选框未选中，但是没有任何值，只有在单击以更改值时才填充该复选框。

这是我的表格代码

  <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>

“必需”指令不适用于复选框，并且我尝试初始化模型，但是没有运气。

Answer 1

当您添加这样的命名表单时，它将被添加到控制器的作用域中。 您可以使用名称在控制器内部访问它，类似于HTML：

$scope.addAppForm.android;

设置表单后的任何时间，即使尚未单击它，其结果也应为true / false。

编辑：在控制器中访问表格的地方进行修饰 。

Answer 2

我已经弄清楚了我的代码出了什么问题，ng-init实际上有效，我只是在这里混合了运算符->> ng-disabled="addAppForm.$invalid && (addAppForm.iOS != true && addAppForm.android != true)"

应该是ng-disabled="addAppForm.$invalid || (addAppForm.iOS != true && addAppForm.android != true)"

仍然存在问题，即使在表单外部的同一视图中也无法从控制器访问表单。

Answer 3

我仍然不明白为什么您必须将您的数据保存在Formcontroller中，您可以使用一个对象（在这里我称之为“模型”）并将所有表单值放入其中。 您的Formcontroller对象（'addAppForm'）具有功能并保存验证错误，请参见此处： https ://docs.angularjs.org/api/ng/type/form.FormController该对象在初始化后期被添加到Controller的范围内您的控制器

请参阅： 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.

如果没有至少选中一个复选框，这是使表格无效的方法

 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>