Xác thực kích hoạt của một trường khi một trường khác được thay đổi

Question

Tôi có một chỉ thị xác nhận tùy chỉnh đang được gọi đúng khi một trường được thay đổi. Tuy nhiên, liệu trường này có hợp lệ hay không cũng dựa trên giá trị của trường khác. Trường thứ hai này là một danh sách lựa chọn nếu đó là tầm quan trọng.

Tôi đã tự hỏi nếu có một số cách tôi có thể kích hoạt xác nhận theo cách thủ công khi biểu mẫu thứ hai được thay đổi. Có lẽ bằng cách sử dụng sự kiện ng-change. Cách thích hợp để xử lý một cái gì đó như thế này là gì?

Dưới đây là chỉ thị của tôi:

angular.module('myApp', []). 
    directive('validage', function() { 
     return { 
      require: 'ngModel', 
      link: function (scope, elem, attr, ngModel) { 

       function validate(value) { 
        var valid = true; 
        if ((GetDateDifference(new Date(value), new Date()) < 16 || GetDateDifference(new Date(value), new Date()) > 129) 
        && scope.dep.DependantType == "Spouse") { 
         valid = false; 
        } 
        ngModel.$setValidity('validage', valid); 
        return value; 
       } 

       //For DOM -> model validation 
       ngModel.$parsers.unshift(function (value) { 
        var valid = true; 
        if ((GetDateDifference(new Date(value), new Date()) < 16 || GetDateDifference(new Date(value), new Date()) > 129) 
        && scope.dep.DependantType == "Spouse") { 
         valid = false; 
        } 
        ngModel.$setValidity('validage', valid); 
        return value; 
       }); 

       //For model -> DOM validation 
       ngModel.$formatters.unshift(function (value) { 
        var valid = true; 
        if ((GetDateDifference(new Date(value), new Date()) < 16 || GetDateDifference(new Date(value), new Date()) > 129) 
        && scope.dep.DependantType == "Spouse") { 
         valid = false; 
        } 
        ngModel.$setValidity('validage', valid); 
        return value; 
       }); 
      } 
     }; 
    }); 

Nếu bạn là người mới đến AngularJS, Tôi chắc chắn sẽ khuyên bạn nên đọc những bài viết 2: part 1 & part 2. Chúng là một tổng quan về các dạng AngularJS.

Answer 1

Tôi đã kết thúc việc thêm chỉ thị vào trường thứ hai và sau đó thay đổi chỉ thị để thêm thông báo lỗi vào trường có lỗi. Có thể có một cách tốt hơn, nhưng đó là những gì tôi đã làm.

Answer 2

Tôi gặp vấn đề tương tự: hai trường biểu mẫu "interval" (cho $ scope.monitor.interval) và "timeout" (với $ scope.monitor.timeout) với điều kiện timeout không được vượt quá một nửa khoảng thời gian.

Trước tiên, tôi đã thêm trình xác thực tùy chỉnh vào thời gian chờ để kiểm tra điều kiện này. Bây giờ tôi cần kích hoạt trình xác nhận thời gian chờ cũng khi khoảng thời gian thay đổi. Tôi đạt được điều này bằng cách xem tài sản monitor.interval của mô hình:

function EditMonitorCtrl($scope, $log, dialog, monitor) { 
    $scope.monitor = monitor; 

    ... 

    // trigger validation of timeout field when interval changes 
    $scope.$watch("monitor.interval", function() { 
     if ($scope.editMonitorDlg.timeout.$viewValue) {   
      $scope.editMonitorDlg.timeout.$setViewValue($scope.editMonitorDlg.timeout.$viewValue); 
     } 
    }); 
} 

Nếu không có "nếu" giá trị timeout bị loại bỏ trong quá intialisation của hộp thoại.

Answer 3

Sau khi tìm kiếm rất nhiều cho điều này tôi đã tìm thấy rằng chúng tôi có thể kích hoạt xác nhận đơn giản bằng cách gọi $validate() trên trường mong muốn.
Vì vậy, ví dụ nếu mẫu của bạn được đặt tên My_Form (tức là trong đánh dấu toàn bộ thẻ form có một thuộc tính name="my_form") và tên của các trường bạn muốn xác nhận được ngày (trong đánh dấu các lĩnh vực đầu vào có name="date" thuộc tính), khi bạn đề xuất bạn có thể sử dụng sự kiện ng-change của trường thứ hai và gọi $scope.my_form.date.$validate(); bất cứ khi nào hàm ng-thay đổi được gọi.

Answer 4

Tôi không thể nhận được ng-blur="myForm.myField.$validate()" làm việc trong AngularJS 1.5, có thể do mô hình cho myField bị trống.

Tuy nhiên, ng-blur="myForm.myField.$setTouched()" đã hoạt động.