AngularJS memeriksa apakah form valid di controller

87

Saya perlu memeriksa apakah formulir valid di pengontrol.

Melihat:

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

Di pengontrol saya:

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

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

        ...

Saya mendapatkan kesalahan ini:

TypeError: Cannot read property '$valid' of undefined
angularjs Rober
sumber
Apakah Anda membungkusnya dengan fungsi setBusinessInformation dalam pengontrol?
matsko
3
kode terlalu terfragmentasi untuk menganalisis apa yang bisa salah ... buat demo sederhana di jsfiddle.net atau plunker yang mereplikasi masalah. Apakah bentuk dalam ruang lingkup BusinessCtrl? tidak tahu tanpa melihat lebih banyak
charlietfl
@ Matsko: Tidak. Saya perlu menjalankan kode ini pada inisialisasi pengontrol.
Rober
@charlietfl: Tidak lebih. Saya menghapus beberapa kode untuk menyederhanakan contoh. Ya, formulir harus berada dalam lingkup BusinessCtrl (pengontrol disetel pada rute di app.js. Saya menambahkan solusi saya dalam jawaban di bawah ini. Tapi, saya tidak tahu mengapa tidak berfungsi seperti ini.
Rober

Jawaban:

109

Coba ini

dalam penglihatan:

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

dalam pengontrol:

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

atau

dalam penglihatan:

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

dalam pengontrol:

$scope.submitForm = function(formValid){
  if(formValid) {
    // Code here if valid
  }
};
Damsorian
sumber
Bagaimana jika saya ingin memvalidasi beberapa tombol dalam satu formulir?
Fahad Mullaji
ini berhasil untuk saya, tetapi mengapa $scope.formName.$validhasilnya tidak terdefinisi?
ps0604
Jika Anda menggunakan ng-if maka $ scope.formName. $ Valid tidak akan berfungsi dan jika Anda menggunakan ng-show maka $ scope.formName. $ Valid akan berfungsi.
Vaibhav Shaha
2
Ini harus menjadi jawaban terbaik, sederhana. Tapi bisakah Anda menangani formulir yang tidak valid? Bagaimana Anda bisa menunjukkan kepada pengguna input apa yang tidak valid?
Nicolas Leucci
1
@ ps0604 the hanya formName.$validdapat diakses di template, jika Anda ingin mengakses di kontroler, Anda perlu membuat objek seperti itu $scope.forms.formNamedan di template: <form name="forms.formName"> periksa komentar ini
Damsorian
29

Saya telah memperbarui pengontrol ke:

.controller('BusinessCtrl',
    function ($scope, $http, $location, Business, BusinessService, UserService, Photo) {
        $scope.$watch('createBusinessForm.$valid', function(newVal) {
            //$scope.valid = newVal;
            $scope.informationStatus = true;
        });
        ...
Rober
sumber
Juga ingat bahwa - Jika formulir adalah Modal, ingatlah untuk menyatakan nama formulir sebagai notasi titik misalnya: "data.theform" dan akses di pengontrol Anda sebagai $ scope.data.theform
Jasper
2
Ini tidak berhasil untuk saya. Tolong tunjukkan bagaimana Anda mendapatkan 'createBusinessForm' ke dalam lingkup $ pengontrol.
cyrf
$ scope semuanya telah hilang, sekarang hari kita menggunakan vmpendekatan. Anda dapat membuat plunker untuk jawaban yang sama dengan menggunakan pengontrol sebagai pendekatan sintaks. Saya tidak bisa melakukannya Ini akan membantu orang lain juga yang mencari jawaban dengan konteks hari ini. Terima kasih
ankitd
14

Ini solusi lainnya

Tetapkan variabel lingkup tersembunyi di html Anda, lalu Anda dapat menggunakannya dari pengontrol Anda:

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

Berikut adalah contoh kerja lengkapnya: 

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>
Luaskan cuplikan

Enkode
sumber
4

Ini BusinessCtrldimulai sebelum createBusinessForm's FormController. Bahkan jika Anda memiliki ngControllerformulir tidak akan bekerja seperti yang Anda inginkan. Anda tidak dapat membantu ini (Anda dapat membuat filengControllerDirective , dan mencoba mengelabui prioritas.) Ini adalah cara kerja angularjs.

Lihat plnkr ini misalnya: http://plnkr.co/edit/WYyu3raWQHkJ7XQzpDtY?p=preview

Oliver
sumber