Angular 表单复选框默认值

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>

"required" 指令不适用于复选框，我尝试初始化模型但没有成功。

Answer 1

当您添加这样的命名表单时，它会添加到您的控制器范围内。您可以使用名称在控制器内部访问它，类似于 HTML:

$scope.addAppForm.android;

在设置表单后的任何时候，即使尚未单击该表单，它的计算结果也应为 true/false。

编辑：Fiddle 在控制器中访问表单的位置。

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 中你可以使用一个对象（我在这里称之为 'model' ）并将所有表单值放入其中。您的 Formcontroller 对象 ( 'addAppForm' ) 具有功能并保存验证错误，请参见此处：https://docs.angularjs.org/api/ng/type/form.FormController 此对象在控制器初始化后期添加到您的控制器范围内

参见：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>

Angular 表单复选框默认值

Angular form checkbox default value

javascript

forms

validation

checkbox

angularjs