AngularJS verifica se o formulário é válido no controlador

86

Preciso verificar se um formulário é válido em um controlador.

Visão:

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

No meu controlador:

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

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

        ...

Estou recebendo este erro:

TypeError: Cannot read property '$valid' of undefined

angularjs

— Rober
fonte

Você envolveu a função setBusinessInformation no controlador?

— matsko de

3

código muito fragmentado para analisar o que pode estar errado ... crie uma demonstração simples no jsfiddle.net ou plunker que replica o problema. O formulário está dentro do escopo de BusinessCtrl? não posso dizer sem ver mais

— charlietfl

@matsko: Não. Eu preciso executar este código na inicialização do controlador.

— Rober de

@charlietfl: Não há muito mais. Eu removo algum código para simplificar o exemplo. Sim, o formulário deve estar no escopo do BusinessCtrl (o controlador é definido em rotas no app.js. Eu adiciono minha solução na resposta abaixo. Mas, não sei por que não está funcionando dessa forma.

— Rober

109

Tente isto

em vista:

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

no controlador:

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

ou

em vista:

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

no controlador:

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

— Damsoriano
fonte

E se eu quiser validar vários botões em um formulário?

— Fahad Mullaji

isso funcionou para mim, mas por que $scope.formName.$validresulta em indefinido?

— ps0604

Se você usar ng-if então $ scope.formName. $ Valid não funcionará e se você usar ng-show então $ scope.formName. $ Valid funcionará.

— Vaibhav Shaha

2

Esta deve ser a melhor resposta, simples. Mas você poderia lidar com o formulário inválido? Como você poderia mostrar ao usuário quais entradas são inválidas?

— Nicolas Leucci

1

@ ps0604 o formName.$validpode ser acessado apenas no template, se você deseja acessar no controlador você precisa criar um objeto para esse gosto $scope.forms.formNamee no template: <form name="forms.formName"> verifique este comentário

— Damsorian 23/09/16

29

Eu atualizei o controlador para:

.controller('BusinessCtrl',
    function ($scope, $http, $location, Business, BusinessService, UserService, Photo) {
        $scope.$watch('createBusinessForm.$valid', function(newVal) {
            //$scope.valid = newVal;
            $scope.informationStatus = true;
        });
        ...

— Rober
fonte

Lembre-se também disso - Se o formulário for Modal, lembre-se de declarar o nome do formulário como notação de ponto, por exemplo: "data.theform" e acesse-o em seu controlador como $ scope.data.theform

— Jasper

2

Isso não funciona para mim. Por favor, mostre como você coloca 'createBusinessForm' no escopo $ do controlador.

— cyrf

As coisas de $ scope se foram, agora que estamos usando a vmabordagem. você pode criar um plunker para a mesma resposta usando o controlador como abordagem de sintaxe. Eu não sou capaz de fazer isso. Será útil também para outros que estão procurando uma resposta no contexto de hoje. Obrigado

— ankitd de

14

Aqui está outra solução

Defina uma variável de escopo oculta em seu html, então você pode usá-la em seu controlador:

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

Aqui está o exemplo de trabalho completo:

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>

Expandir snippet

— Enkode
fonte

4

O BusinessCtrlé inicializado antes do createBusinessForm's FormController. Mesmo se você tiver o ngControllerno formulário, não funcionará da maneira que você queria. Você não pode evitar isso (você pode criar o seu ngControllerDirectivee tentar enganar a prioridade). É assim que o angularjs funciona.

Consulte este plnkr por exemplo: http://plnkr.co/edit/WYyu3raWQHkJ7XQzpDtY?p=preview

— Oliver
fonte