Câu hỏi Làm cách nào để kiểm tra tính hợp lệ của biểu mẫu với angularj?


Tôi rất mới với angularjs. Giả sử ứng dụng của tôi có biểu mẫu. Sử dụng thanh tra, tôi nhận thấy rằng nếu angularjs nghĩ rằng biểu mẫu không hợp lệ, nó thêm một lớp ng-invalid vào biểu mẫu. Đáng yêu.

Vì vậy, có vẻ như để kiểm tra xem biểu mẫu có hợp lệ không, tôi cần phải gây ô nhiễm mã của tôi với bộ chọn Jquery ?! Cách angularjs để chỉ ra hình thức hợp lệ mà không sử dụng một bộ điều khiển biểu mẫu là gì?


76
2018-01-13 01:40


gốc


"không sử dụng bộ điều khiển biểu mẫu" Tại sao không sử dụng bộ điều khiển? Đó là cách góc - KayEss


Các câu trả lời:


Khi bạn đặt <form> tag bên trong bạn ngApp, AngularJS tự động thêm bộ điều khiển biểu mẫu (thực ra có một chỉ thị, được gọi là form thêm hành vi nessesary). Giá trị của thuộc tính name sẽ bị ràng buộc trong phạm vi của bạn; một cái gì đó như <form name="yourformname">...</form> sẽ thỏa mãn:

Một biểu mẫu là một thể hiện của FormController. Ví dụ mẫu có thể được xuất bản tùy ý vào phạm vi bằng cách sử dụng thuộc tính name.

Vì vậy, để kiểm tra tính hợp lệ của biểu mẫu, bạn có thể kiểm tra giá trị của $scope.yourformname.$valid tài sản của phạm vi.

Bạn có thể nhận thêm thông tin tại Phần Hướng dẫn của nhà phát triển về biểu mẫu.


143
2018-01-13 02:25



Thông thường nó sẽ được gọi bên trong JS như $scope.yourformname.$valid. - Dan Atkinson
luôn luôn có lỗi Không thể đọc thuộc tính '$ valid' của undefined - John Nguyen
Bạn cần phải cung cấp một cách rõ ràng biểu mẫu một số tên như <form name = "form">, sau đó $ scope.form sẽ có sẵn .. - StrangeLoop
nếu thuộc tính dường như không được định nghĩa trong bộ điều khiển, hãy khởi tạo nó một cách rõ ràng trong bộ điều khiển $scope.myformname = {}; - Nicolas Janel
@ JohnNguyen tôi đã gặp lỗi chính xác tương tự. có cách giải quyết này tôi đã làm. Trong hàm gửi của bạn, hãy chuyển biểu mẫu dưới dạng đối số. bạn có thể vào bộ điều khiển của bạn và kiểm tra xem biểu mẫu có hợp lệ không bởi yourFormName. $ valid. Họ đã sử dụng ví dụ này trong tài liệu Angular, plunker của họ được tìm thấy ở đây: plnkr.co/edit/Q8mlPOSgkaPstg4uvjlc?p=preview - devonJS


Thí dụ

<div ng-controller="ExampleController">
  <form name="myform">
   Name: <input type="text" ng-model="user.name" /><br>
   Email: <input type="email" ng-model="user.email" /><br>
  </form>
</div>

<script>
  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

     //if form is not valid then return the form.
     if(!$scope.myform.$valid) {
       return;
     }
  }]);
</script>

36
2017-10-01 10:18





Bạn cũng có thể dùng myform.$invalid

Ví dụ.

if($scope.myform.$invalid){return;}

11
2017-09-26 18:20





hình thức

  • chỉ thị trong module ng Chỉ thị mà instantiates FormController.

Nếu thuộc tính name được chỉ định, bộ điều khiển biểu mẫu được xuất bản lên phạm vi hiện tại dưới tên này.

Bí danh: ngForm

Trong Angular, các hình thức có thể được lồng nhau. Điều này có nghĩa là biểu mẫu bên ngoài là hợp lệ khi tất cả các biểu mẫu con đều hợp lệ. Tuy nhiên, các trình duyệt không cho phép lồng ghép các phần tử, do đó Angular cung cấp chỉ thị ngForm hoạt động giống hệt nhưng có thể lồng nhau. Điều này cho phép bạn có các biểu mẫu lồng nhau, rất hữu ích khi sử dụng các chỉ thị xác thực góc trong các biểu mẫu được tạo động bằng cách sử dụng lệnh ngRepeat. Vì bạn không thể tự động tạo thuộc tính tên của các phần tử đầu vào bằng cách sử dụng phép nội suy, bạn phải bọc từng bộ đầu vào lặp lại trong một chỉ thị ngForm và lồng chúng trong một phần tử biểu mẫu bên ngoài.

Lớp CSS

ng-hợp lệ được đặt nếu biểu mẫu hợp lệ.

ng-không hợp lệ được đặt nếu biểu mẫu không hợp lệ.

ng-pristine được đặt nếu biểu mẫu là nguyên sơ.

ng-bẩn được đặt nếu biểu mẫu bị bẩn.

ng-gửi được đặt nếu biểu mẫu đã được gửi.

Hãy nhớ rằng ngAnimate có thể phát hiện từng lớp này khi được thêm và xóa.

Gửi biểu mẫu và ngăn tác vụ mặc định

Vì vai trò của các biểu mẫu trong các ứng dụng góc phía máy khách khác với các ứng dụng khứ hồi cổ điển, nên trình duyệt không dịch các biểu mẫu thành tải lại toàn trang gửi dữ liệu đến máy chủ. Thay vào đó, một số logic javascript sẽ được kích hoạt để xử lý việc gửi biểu mẫu theo cách ứng dụng cụ thể.

Vì lý do này, Angular ngăn chặn hành động mặc định (gửi biểu mẫu tới máy chủ) trừ khi phần tử có thuộc tính action được chỉ định.

Bạn có thể sử dụng một trong hai cách sau để chỉ định phương thức javascript nào sẽ được gọi khi biểu mẫu được gửi:

ngSubmit chỉ thị trên phần tử biểu mẫu

ngClick chỉ thị trên nút đầu tiên hoặc trường nhập loại (nhập [loại = gửi])

Để ngăn chặn việc thực thi đôi của trình xử lý, chỉ sử dụng một trong các lệnh ngSubmit hoặc ngClick.

Điều này là do các quy tắc gửi biểu mẫu sau trong đặc tả HTML:

Nếu một biểu mẫu chỉ có một trường nhập sau đó nhấn enter trong trường này sẽ kích hoạt gửi biểu mẫu (ngSubmit) nếu một biểu mẫu có 2 trường nhập liệu và không có nút hoặc input[type=submit] sau đó nhấn enter không kích hoạt gửi nếu một biểu mẫu có một hoặc nhiều trường nhập và một hoặc nhiều nút hoặc input[type=submit] sau đó nhấn enter trong bất kỳ trường nhập nào sẽ kích hoạt trình xử lý nhấp chuột vào nút đầu tiên hoặc input[type=submit] (ngClick) và trình xử lý gửi trên biểu mẫu kèm theo (ngSubmit).

Mọi thay đổi ngModelOptions đang chờ xử lý sẽ diễn ra ngay lập tức khi gửi biểu mẫu kèm theo. Lưu ý rằng các sự kiện ngClick sẽ xảy ra trước khi mô hình được cập nhật.

Sử dụng ngSubmit để có quyền truy cập vào mô hình cập nhật.

app.js:

angular.module('formExample', [])
  .controller('FormController', ['$scope', function($scope) {
    $scope.userType = 'guest';
  }]);

Hình thức:

<form name="myForm" ng-controller="FormController" class="my-form">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span>
  userType = {{userType}}
  myForm.input.$valid = {{myForm.input.$valid}}
  myForm.input.$error = {{myForm.input.$error}}
  myForm.$valid = {{myForm.$valid}}
  myForm.$error.required = {{!!myForm.$error.required}}
 </form>

Nguồn: AngularJS: API: biểu mẫu


5
2018-05-05 17:04