AngularJS kiểm tra xem biểu mẫu có hợp lệ trong bộ điều khiển không

86

Tôi cần kiểm tra xem biểu mẫu có hợp lệ trong bộ điều khiển hay không.

Lượt xem:

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

Trong bộ điều khiển của tôi:

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

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

        ...

Tôi gặp lỗi này:

TypeError: Cannot read property '$valid' of undefined

angularjs

— Rober
nguồn

Bạn có quấn nó quanh chức năng setBusinessInformation trong bộ điều khiển không?

— matsko

3

mã quá phân mảnh để phân tích những gì có thể sai ... hãy tạo một bản trình diễn đơn giản trong jsfiddle.net hoặc plunker để tái tạo sự cố. Hình thức nằm trong phạm vi của BusinessCtrl? không thể nói mà không nhìn thấy nhiều hơn

— charlietfl

@matsko: Không. Tôi cần thực thi mã này khi khởi tạo bộ điều khiển.

— Rober

@charlietfl: Không còn nhiều nữa. Tôi xóa một số mã để đơn giản hóa ví dụ. Có, biểu mẫu phải nằm trong phạm vi của BusinessCtrl (bộ điều khiển được đặt trên các tuyến trong app.js. Tôi thêm giải pháp của mình vào một câu trả lời bên dưới. Nhưng, tôi không biết tại sao không hoạt động theo cách này.

— Rober

109

Thử đi

trong quan điểm:

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

trong bộ điều khiển:

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

hoặc là

trong quan điểm:

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

trong bộ điều khiển:

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

— Damsorian
nguồn

Điều gì sẽ xảy ra nếu tôi muốn xác thực nhiều nút trong một biểu mẫu?

— Fahad Mullaji

điều này làm việc cho tôi, nhưng tại sao $scope.formName.$validkết quả không xác định?

— ps0604

Nếu bạn sử dụng ng-if thì $ scope.formName. $ Valid sẽ không hoạt động và nếu bạn sử dụng ng-show thì $ scope.formName. $ Valid sẽ hoạt động.

— Vaibhav Shaha

2

Đây phải là câu trả lời tốt nhất, đơn giản. Nhưng bạn có thể xử lý biểu mẫu không hợp lệ? Làm thế nào bạn có thể hiển thị cho người dùng những đầu vào không hợp lệ?

— Nicolas Leucci

1

@ ps0604 sự formName.$validcó thể được truy cập chỉ trong mẫu, nếu bạn muốn truy cập vào bộ điều khiển bạn cần để tạo ra một đối tượng cho rằng như $scope.forms.formNamevà trong mẫu: <form name="forms.formName"> kiểm tra nhận xét này

— Damsorian

29

Tôi đã cập nhật bộ điều khiển thành:

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

— Rober
nguồn

Cũng nên nhớ rằng - Nếu hình thức là một phương thức sau đó nhớ để khai báo tên hình thức như ký hiệu dấu chấm ví dụ như: "data.theform" và truy cập nó trong điều khiển của bạn như $ scope.data.theform

— Jasper

2

Điều này không làm việc cho tôi. Vui lòng chỉ ra cách bạn đưa 'createBusinessForm' vào phạm vi $ của bộ điều khiển.

— cyrf

$ scope đã trôi qua, bây giờ một ngày chúng tôi đang sử dụng vmphương pháp tiếp cận. bạn có thể tạo một plunker cho cùng một câu trả lời bằng cách sử dụng bộ điều khiển làm phương pháp tiếp cận cú pháp. Tôi không thể làm điều đó. Nó sẽ hữu ích cho những người khác cũng như những người đang tìm kiếm câu trả lời với bối cảnh ngày nay. Cảm ơn

— ankitd

14

Đây là một giải pháp khác

Đặt một biến phạm vi ẩn trong html của bạn, sau đó bạn có thể sử dụng nó từ bộ điều khiển của mình:

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

Đây là ví dụ hoạt động đầy đủ:

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>

Mở rộng đoạn mã

— Enkode
nguồn

4

Các BusinessCtrlđược khởi tạo trước khi createBusinessForm's FormController. Ngay cả khi bạn có ngControllertrên biểu mẫu sẽ không hoạt động theo cách bạn muốn. Bạn không thể giúp điều này (bạn có thể tạongControllerDirective và cố gắng đánh lừa mức độ ưu tiên.) Đây là cách hoạt động của góc cạnh.

Xem plnkr này chẳng hạn: http://plnkr.co/edit/WYyu3raWQHkJ7XQzpDtY?p=preview

— Oliver
nguồn