Question

我一直试图抓住使用表单验证最佳实践的Angular表单，这迫使我使用表单名称并将所有模型作为其子项，以便我可以绑定表单名。$ 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;

在表单设置完成后，即使尚未点击该表单，也应立即评估为真/假。

编辑：Fiddle，在控制器中访问表单。

Answer 2

我已经弄明白我的代码有什么问题，ng-init实际上有效，我只是把运营商搞砸了 - ＆gt;＆gt; 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此对象在Controller初始化后添加到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>

角度形式复选框默认值

3 个答案: