AngularJS, formun denetleyicide geçerli olup olmadığını kontrol eder

87

Bir kontrolörde bir formun geçerli olup olmadığını kontrol etmem gerekiyor.

Görünüm:

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

Denetleyicimde:

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

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

        ...

Bu hatayı alıyorum:

TypeError: Cannot read property '$valid' of undefined

angularjs

— Rober
kaynak

Denetleyicideki setBusinessInformation işlevinin etrafına sardınız mı?

— matsko

3

neyin yanlış olabileceğini analiz etmek için fazla parçalanmış kod ... jsfiddle.net veya plunker'da sorunu kopyalayan basit bir demo oluşturun. Form kapsam dahilinde BusinessCtrlmi? daha fazlasını görmeden söyleyemem

— charlietfl

@matsko: Hayır. Bu kodu denetleyici başlatılırken çalıştırmam gerekiyor.

— Rober

@charlietfl: Daha fazlası yok. Örneği basitleştirmek için bazı kodları kaldırıyorum. Evet, form BusinessCtrl kapsamında olmalıdır (denetleyici app.js'deki rotalarda ayarlanmıştır. Çözümümü aşağıdaki cevaba ekliyorum. Ancak neden bu şekilde çalışmadığını bilmiyorum.

— Rober

109

Bunu dene

görünümünde:

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

denetleyicide:

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

veya

görünümünde:

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

denetleyicide:

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

— Damsorian
kaynak

Bir formdaki birden çok düğmeyi doğrulamak istersem ne olur?

— Fahad Mullaji

bu benim için çalıştı, ancak neden $scope.formName.$validtanımsız ile sonuçlanıyor?

— ps0604

Eğer ng-if kullanırsanız $ kapsam.formName. $ Valid çalışmaz ve ng-show kullanırsanız $ kapsam.formName. $ Valid çalışacaktır.

— Vaibhav Shaha

2

Bu en iyi cevap olmalı, basit. Ama formu geçersiz halledebilir misin? Hangi girişlerin geçersiz olduğunu kullanıcıya nasıl gösterebilirsiniz?

— Nicolas Leucci

1

@ ps0604'e formName.$validyalnızca şablondan erişilebilir, denetleyiciye erişmek istiyorsanız, bunun gibi $scope.forms.formNameve şablonda bir nesne oluşturmanız gerekir : <form name="forms.formName"> bu yorumu kontrol edin

— Damsorian

29

Denetleyiciyi şu şekilde güncelledim:

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

— Rober
kaynak

Ayrıca şunu da unutmayın - Form bir Modal ise, form adını nokta notasyonu olarak bildirmeyi unutmayın, örneğin: "data.theform" ve denetleyicinizde $ kapsam.data.theform olarak erişin

— Jasper

2

Bu benim için çalışmıyor. Lütfen denetleyicinin $ kapsamına 'createBusinessForm'u nasıl aldığınızı gösterin.

— cyrf

$ kapsam şeyler gitti, şimdi vmyaklaşımı kullandığımız günler . sözdizimi yaklaşımı olarak denetleyiciyi kullanarak aynı yanıt için bir plunker oluşturabilirsiniz. Ben yapamıyorum Bugünün bağlamı ile cevap arayan başkaları için de faydalı olacaktır. Teşekkürler

— ankitd

14

İşte başka bir çözüm

Html'nizde gizli bir kapsam değişkeni ayarlayın, ardından bunu denetleyicinizden kullanabilirsiniz:

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

İşte tam çalışma örneği:

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>

Snippet'i genişlet

— Enkode
kaynak

4

BusinessCtrlÖnce bir sıfırlanır createBusinessForm's FormController. ngControllerFormda sizde olsa bile istediğiniz şekilde çalışmayacaktır. Buna yardımcı olamazsınız (kendinizinkini oluşturabilir ngControllerDirectiveve önceliği kandırabilirsiniz.) Angularjs bu şekilde çalışır.

Örneğin bu plnkr'a bakın: http://plnkr.co/edit/WYyu3raWQHkJ7XQzpDtY?p=preview

— Oliver
kaynak