AngularJS: Có cách nào để xác định trường nào đang làm cho biểu mẫu không hợp lệ không?

Tôi có mã sau trong ứng dụng AngularJS, bên trong bộ điều khiển, được gọi từ hàm ng-submit, thuộc về biểu mẫu có tên profileForm:

$scope.updateProfile = function() {
  if($scope.profileForm.$invalid) { 
    //error handling..
  }
  //etc.
};

Bên trong hàm này, có cách nào để tìm ra trường nào khiến toàn bộ biểu mẫu được gọi là không hợp lệ không?

nameThông tin xác thực của mỗi đầu vào được hiển thị dưới dạng thuộc tính trong formtên của trongscope .

HTML

<form name="someForm" action="/">
    <input name="username" required />
    <input name="password" type="password" required />
</form>

JS

$scope.someForm.username.$valid
// > false
$scope.someForm.password.$error
// > { required: true }

Các tính chất tiếp xúc được $pristine, $dirty, $valid, $invalid,$error .

Nếu bạn muốn lặp lại các lỗi vì lý do nào đó:

$scope.someForm.$error
// > { required: [{$name: "username", $error: true /*...*/},
//                {$name: "password", /*..*/}] }

Mỗi quy tắc bị lỗi sẽ được hiển thị trong $ error.

Đây là một plunkr để chơi với http://plnkr.co/edit/zCircDauLfeMcMUSnYaO?p=preview

Để kiểm tra trường biểu mẫu nào không hợp lệ

console.log($scope.FORM_NAME.$error.required);

điều này sẽ xuất ra mảng các trường không hợp lệ của biểu mẫu

Nếu bạn muốn xem trường nào đang làm xáo trộn quá trình xác thực của mình và bạn có jQuery giúp bạn, chỉ cần tìm kiếm lớp "ng-không hợp lệ" trên bảng điều khiển javascript.

$('.ng-invalid');

Nó sẽ liệt kê tất cả các phần tử DOM không xác thực được vì bất kỳ lý do gì.

Bạn có thể lặp lại form.$error.pattern.

$scope.updateProfile = function() {
    var error = $scope.profileForm.$error;
    angular.forEach(error.pattern, function(field){
        if(field.$invalid){
            var fieldName = field.$name;
            ....
        }
    });
}

Khi bất kỳ trường nào không hợp lệ, nếu bạn cố gắng lấy giá trị của nó, nó sẽ được undefined.

Giả sử bạn có một văn bản nhập kèm theo $scope.mynumchỉ hợp lệ khi bạn nhập số và bạn đã nhập ABCvào nó.

Nếu bạn cố gắng lấy giá trị của $scope.mynum, nó sẽ là undefined; nó sẽ không trả lại ABC.

(Có thể bạn biết tất cả những điều này, nhưng dù sao)

Vì vậy, tôi sẽ sử dụng một mảng có tất cả các phần tử cần xác thực mà tôi đã thêm vào phạm vi và sử dụng một bộ lọc (ví dụ: với underscore.js) để kiểm tra xem những phần tử nào trả về dưới dạng typeof undefined.

Và đó sẽ là những trường gây ra trạng thái không hợp lệ.

Tôi muốn hiển thị tất cả các lỗi trong chú giải công cụ nút Lưu bị vô hiệu hóa, vì vậy người dùng sẽ biết tại sao lại bị vô hiệu hóa thay vì cuộn lên và xuống biểu mẫu dài.

Lưu ý: hãy nhớ thêm thuộc tính tên vào các trường trong biểu mẫu của bạn

    if (frm) {
        disable = frm.$invalid;
        if (frm.$invalid && frm.$error && frm.$error.required) {
            frm.$error.required.forEach(function (error) {
                disableArray.push(error.$name + ' is required'); 
            });
        }
    }
    if (disableArray.length > 0) {
        vm.disableMessage = disableArray.toString();
    }

Đối với ứng dụng của tôi, tôi hiển thị lỗi như sau:

<ul ng-repeat="errs in myForm.$error">
<li ng-repeat="err in errs">{{err.$name}}</li></ul>

nếu bạn muốn xem mọi thứ, chỉ cần người dùng 'err' sẽ hiển thị một cái gì đó như sau:

 "$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": { "required": true },
"$name": "errorfieldName",
"$options": {}

Nó không được định dạng tốt, nhưng bạn sẽ thấy những thứ này ở đó ...

Nếu bạn muốn tìm (các) trường làm mất hiệu lực biểu mẫu trên giao diện người dùng mà không cần lập trình, chỉ cần nhấp chuột phải vào kiểm tra (mở công cụ dành cho nhà phát triển trong chế độ xem phần tử) sau đó tìm kiếm ng-không hợp lệ bằng ctrl + f bên trong tab này. Sau đó, đối với mỗi trường mà bạn tìm thấy lớp ng-không hợp lệ, bạn có thể kiểm tra xem trường không được cung cấp bất kỳ giá trị nào khi nó được yêu cầu hoặc các quy tắc khác mà nó có thể vi phạm (định dạng email không hợp lệ, định nghĩa ngoài dải / max / min, v.v.) . Đây là cách dễ dàng nhất.