Значение по умолчанию для угловой формы

Question

Я пытался захватить угловые формы, применяя лучшие практики для проверки формы, что заставило меня использовать имя формы и иметь все модели в качестве дочерних элементов, чтобы я мог связываться 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; 

Это должно вычисляться истина/ложь любое время после того, как форма была создана, даже если она еще не нажата ,

Редактировать: Fiddle где форма доступна в контроллере.

Answer 2

Я понял, что случилось с моим кодом, то нг-инициализации на самом деле работает, я просто перепутал операторы здесь - >>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 Этот объект добавляется к области вашего контроллера в конце инициализации вашего контроллера

см: 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>