Xác nhận biểu mẫu AngularJS với phạm vi riêng biệt

Question

Tôi muốn sử dụng tính năng xác thực biểu mẫu được tích hợp do AngularJS cung cấp. Tuy nhiên, trong biểu mẫu tôi đang sử dụng các chỉ thị tùy chỉnh mà mỗi lệnh có một phạm vi cô lập. Bởi vì điều này phần tử biểu mẫu không có quyền truy cập vào các giá trị bị ràng buộc.

Bất kỳ ý tưởng nào về cách sửa lỗi này?

hoặc, có thể sử dụng xác thực AngularJS mà không sử dụng biểu mẫu không?

Chỉ thị ng-minlength và ng-required không kích hoạt xác thực biểu mẫu.

<div ng-app="myApp" ng-controller="myCtrl"> 
    <form name="myForm" novalidate> 
     <do-something ng-model="variable"></do-something> 
     <h4 data-ng-if="myForm.myElement.$error.required">Please enter something</h4> 
     <h4 data-ng-if="myForm.myElement.$error.greaterThanOne">Please enter a value greater than 1</h4> 
     <h4 data-ng-if="myForm.myElement.$error.minLength">Please enter something longer than 1 digit</h4> 
    {{myForm.myElement.$error}}  
    </form> 
</div> 

var app = angular.module('myApp', []); 
app.controller('myCtrl', function ($scope) { 
}); 
app.directive('doSomething', function() { 
    return { 
     restrict: 'E', 
     require: '?ngModel', 
     scope: { 
      model: '=ngModel' 
     }, 
     template: 
      '<div>' + 
      ' <input name="myElement" ng-model="model" ng-required ng-minlength="1" />' + 
      '</div>' 
    } 
}); 

Full Plunk có thể được tìm thấy ở đây: Đây là một plunkr đó chứng tỏ vấn đề: http://plnkr.co/edit/iWyvX2?p=preview

Answer 1

Từ hiểu biết của tôi, có bạn phải sử dụng một hình thức để xác nhận.

Cách thức mà tôi xác nhận là thiết lập một chỉ thị như dưới đây

module.directive('ngDoSomething', function() { 
    restrict: 'A' 
    require: '?ngModel', 
    scope: { 
     model: '=ngModel' 
    } 
    link: function($scope, element, attrs, ngModel) { 
    $scope.$watch('model', function(val) { 
     ngModel.$setValidity('required', !!val); 
     ngModel.$setValidity('greaterThanOne', val > 1); 
    } 
}); 

Sau đó sử dụng html

<form name="somethingForm"> 
    <input name="somethingElement" data-ng-do-something data-ng-model="variable" /> 
    <h4 data-ng-if="somethingForm.somethingElement.$error.required">Please enter something</h4> 
    <h4 data-ng-if="somethingForm.somethingElement.$error.greaterThanOne">Please enter a value greater than 1</h4> 
</form> 

Tôi hy vọng điều này sẽ giúp

Answer 2

Ok Daniel, tôi đã tò mò vì vậy tôi nhìn sâu hơn một chút. Sự khác biệt chính giữa mã của bạn và @ user3766487 là bạn đang sử dụng phần tử chỉ thị và mẫu chèn. Tôi tin rằng điều này đã gây ra một chút mơ hồ (bạn sẽ thấy rằng các chỉ thị chính nó và các yếu tố đầu vào tiêm đều có cùng một thuộc tính tên). Mối liên hệ của mô hình dường như không hoạt động tốt.

Tôi đã thay đổi mã của bạn để thay thế mẫu thay thế, điều này đã làm cho mọi việc đơn giản hơn một chút. Nó xuất hiện để làm việc:

http://plnkr.co/edit/eTSbjNe4KXW9IbUKtKuG

Answer 3

Các ng-xác nhận sẽ làm việc như mong đợi với điều này 2 thay đổi:

(1) Thay đổi tên sở hữu để "MINLENGTH" (thay vì "MINLENGTH"):

<h4 data-ng-if="myForm.myElement.$error.minlength"> 

(2) Set ng-cần thiết để "true":

<input name="myElement" ... ng-required="true"> 

Se tting minlength thành "1" không làm bất cứ điều gì bởi vì xác nhận mẫu không kiểm tra minlength wen đầu vào trống. Nếu bạn đặt MINLENGTH đến "5" và gõ một ký tự trong đầu vào, bạn sẽ thấy thông báo "Vui lòng nhập con số lớn hơn 5 chữ"

http://plnkr.co/edit/porkuq5JcKDU89s8g8ZT?p=preview

validator tùy chỉnh của bạn "greaterThanOne" được định nghĩa trên làm -Một cái gì đó chỉ thị. Bạn có thể hiển thị thông báo của nó bằng cách thêm thuộc tính tên như myElementContainer:

<do-something name="myElementContainer" ng-model="myElement"></do-something> 
    <h4 data-ng-show="myForm.myElementContainer.$error.greaterThanOne">Please enter a value greater than 1</h4> 

Tôi khuyên bạn nên định nghĩa logic trong một chỉ thị khác làm thuộc tính cho phần tử đầu vào.

Ngoài ra, sử dụng $ Validators được khuyến khích hơn gọi $ setValidity: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController