Xác thực biểu mẫu với các trường phụ thuộc trong AngularJS

Question

Tôi có một đối tượng có 2 trường, trong khi 1 phải nhỏ hơn hoặc bằng một trường khác.

Nói cài đặt hạn ngạch HDD của nó và tôi cần threshold để nhỏ hơn hoặc bằng HDD size.

Tôi đang cố sử dụng góc cạnh ui-utils#validate của góc cạnh.

Đây là cách tôi có cho đến nay: http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/preview (tôi hy vọng liên kết sẽ làm việc)

Vấn đề mà tôi đang gặp là nó hoạt động để một hướng:

Thiết size và sau đó chơi với threshold hoạt động ok

Nhưng nếu tôi cố gắng thay đổi size, sau threshold ở trạng thái không hợp lệ - không có gì xảy ra. Điều này là do không hợp lệ threshold không được đặt trên mô hình và id size được so sánh với null hoặc undefined (hoặc một cái gì đó tương tự).

Một mặt tôi hiểu logic không đặt giá trị không hợp lệ trên mô hình ... nhưng ở đây nó đang cản đường tôi.

Vì vậy, bất kỳ trợ giúp nào khiến công việc này sẽ được đánh giá cao.

Answer 1

Tôi đã chơi với các chỉ thị tùy chỉnh và đã nấu thứ gì đó phù hợp với trường hợp của tôi.

Mở đầu vào của tôi cho threshold Tôi có less-than-or-equal="quota.size" chỉ thị, đi qua nó tài sản của mô hình để xác nhận đối với (Tôi muốn quota.threshold được ít hơn hoặc bằng quota.size):

<input type="number" name="threshold" 
    ng-model="quota.threshold" 
    required 
    less-than-or-equal="quota.size" /> 

Trong link chức năng của lessThanOrEqual chỉ thị nó bắt đầu xem quota.size và khi quota.size thay đổi, nó chỉ cố gắng đặt giá trị xem hiện tại là threshold trên mô hình:

link: (scope, elem, attr, ctrl) -> 
    scope.$watch attr.lessThanOrEqual, (newValue) -> 
     ctrl.$setViewValue(ctrl.$viewValue) 

Sau đó, trình phân tích cú pháp thực hiện xác thực bằng cách gọi phương thức scope.thresholdValidate(thresholdValue) chuyển cho nó giá trị ứng cử viên. Phương thức này trả true nếu xác nhận thành công và nếu nó - nó trả về giá trị mới, nếu không - giá trị mô hình hiện tại của:

ctrl.$parsers.push (viewValue) -> 
     newValue = ctrl.$modelValue 
     if not scope.thresholdValidate viewValue  
      ctrl.$setValidity('lessThanOrEqual', false) 
     else 
      ctrl.$setValidity('lessThanOrEqual', true) 
      newValue = viewValue 
     newValue 

Tôi đẩy phân tích cú pháp vào bộ sưu tập phân tích cú pháp, như đối diện với unshifting nó giống như hầu hết các ví dụ đề nghị, bởi vì tôi muốn góc để xác nhận required và number chỉ thị, vì vậy tôi có được ở đây chỉ khi tôi có một số hợp lệ và phân tích cú pháp (ít công việc cho tôi, nhưng đối với text đầu vào tôi có lẽ nên thực hiện công việc phân tích cú pháp)

đây là sân chơi của tôi: http://embed.plnkr.co/EysaRdu2vuuyXAXJcJmE/preview

Answer 2

Tốt hơn bao giờ hết, bạn cần phải thêm ng-model-options="{allowInvalid:true}" vào các yếu tố đầu vào biểu mẫu của bạn để ngăn điều này xảy ra - vấn đề là khi lời hứa bị từ chối (ví dụ: sử dụng mô hình $q hoặc $http) theo mặc định, không được cập nhật. Bị điên hả! Chi phí cho tôi một ngày làm việc này ra.

Tôi đã viết một plunkr đặc biệt cho vấn đề này - Hãy tin tôi mã này là tốt ... http://embed.plnkr.co/xICScojgmcMkghMaYSsJ/preview