AngularJS проверяет, действительна ли форма в контроллере

86

Мне нужно проверить, действительна ли форма в контроллере.

Посмотреть:

<form novalidate=""
      name="createBusinessForm"
      ng-submit="setBusinessInformation()"
      class="css-form">
 <!-- fields -->
</form>

В моем контроллере:

.controller(
    'BusinessCtrl',
    function ($scope, $http, $location, Business, BusinessService, 
              UserService, Photo)
    {

        if ($scope.createBusinessForm.$valid) {
            $scope.informationStatus = true;
        }

        ...

Я получаю такую ​​ошибку:

TypeError: Cannot read property '$valid' of undefined
angularjs Робер
источник
Вы обернули его вокруг функции setBusinessInformation внутри контроллера?
matsko
3
код слишком фрагментирован, чтобы анализировать, что может быть не так ... создайте простую демонстрацию в jsfiddle.net или плункер, который воспроизводит проблему. Форма входит в рамки BusinessCtrl? не могу сказать, не увидев большего
charlietfl
@matsko: Нет. Мне нужно выполнить этот код при инициализации контроллера.
Робер
@charlietfl: Больше нечего. Я удаляю код, чтобы упростить пример. Да, форма должна входить в сферу действия BusinessCtrl (контроллер установлен на маршрутах в app.js. Я добавляю свое решение в ответ ниже. Но я не знаю, почему это не работает.
Робер,

Ответы:

109

Попробуй это

ввиду:

<form name="formName" ng-submit="submitForm(formName)">
 <!-- fields -->
</form>

в контроллере:

$scope.submitForm = function(form){
  if(form.$valid) {
   // Code here if valid
  }
};

или

ввиду:

<form name="formName" ng-submit="submitForm(formName.$valid)">
  <!-- fields -->
</form>

в контроллере:

$scope.submitForm = function(formValid){
  if(formValid) {
    // Code here if valid
  }
};
Дамсорианец
источник
Что, если я хочу проверить несколько кнопок в форме?
Fahad Mullaji
это сработало для меня, но почему $scope.formName.$validрезультаты undefined?
ps0604
Если вы используете ng-if, то $ scope.formName. $ Valid не будет работать, а если вы используете ng-show, то $ scope.formName. $ Valid будет работать.
Vaibhav Shaha
2
Это должен быть лучший ответ, простой. Но могли бы вы обработать форму недействительной? Как вы могли показать пользователю, какие вводимые данные недействительны?
Николя Леуччи,
1
@ ps0604 formName.$validдоступ к нему можно получить только в шаблоне, если вы хотите получить доступ в контроллере, вам нужно создать объект для этого, как $scope.forms.formNameи в шаблоне:<form name="forms.formName"> проверьте этот комментарий
Дамсориан
29

Я обновил контроллер, чтобы:

.controller('BusinessCtrl',
    function ($scope, $http, $location, Business, BusinessService, UserService, Photo) {
        $scope.$watch('createBusinessForm.$valid', function(newVal) {
            //$scope.valid = newVal;
            $scope.informationStatus = true;
        });
        ...
Робер
источник
Также помните, что - если форма является модальной, не забудьте объявить имя формы как точечную нотацию, например: «data.theform» и получить к нему доступ в вашем контроллере как $ scope.data.theform
Джаспер
2
У меня это не работает. Пожалуйста, покажите, как вы получаете createBusinessForm в $ scope контроллера.
cyrf 02
$ scope ушло, теперь мы используем vmподход. Можете ли вы создать плункер для того же ответа, используя подход «контроллер как синтаксис». Я не могу этого сделать. Это будет полезно и для тех, кто ищет ответ в сегодняшнем контексте. Спасибо
ankitd 02
14

Вот еще одно решение

Установите скрытую переменную области в вашем html, затем вы можете использовать ее со своего контроллера:

<span style="display:none" >{{ formValid = myForm.$valid}}</span>

Вот полный рабочий пример: 

angular.module('App', [])
.controller('myController', function($scope) {
  $scope.userType = 'guest';
  $scope.formValid = false;
  console.info('Ctrl init, no form.');
  
  $scope.$watch('myForm', function() {
    console.info('myForm watch');
    console.log($scope.formValid);
  });
  
  $scope.isFormValid = function() {
    //test the new scope variable
    console.log('form valid?: ', $scope.formValid);
  };
});
<!doctype html>
<html ng-app="App">
<head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
</head>
<body>

<form name="myForm" ng-controller="myController">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
  <tt>userType = {{userType}}</tt><br>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
  
  
  /*-- Hidden Variable formValid to use in your controller --*/
  <span style="display:none" >{{ formValid = myForm.$valid}}</span>
  
  
  <br/>
  <button ng-click="isFormValid()">Check Valid</button>
 </form>
</body>
</html>
Развернуть фрагмент

Энкоде
источник
4

BusinessCtrlИнициализируется перед createBusinessForm«с FormController. Даже если у вас есть ngControllerформа, она не будет работать так, как вы хотели. Вы ничего не можете с этим поделать (вы можете создать свой ngControllerDirectiveи попытаться обмануть приоритет). Вот как работает angularjs.

См. Этот plnkr, например: http://plnkr.co/edit/WYyu3raWQHkJ7XQzpDtY?p=preview

Оливер
источник