AngularJS: Hangi alanların formu geçersiz kıldığını belirlemenin herhangi bir yolu var mı?

AngularJS uygulamasında, bir denetleyicinin içinde, adı olan bir forma ait olan ng-submit işlevinden çağrılan aşağıdaki koda sahibim profileForm:

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

Bu işlevin içinde, hangi alanların tüm formun geçersiz olarak adlandırılmasına neden olduğunu anlamanın bir yolu var mı?

Her girişin namedoğrulama bilgisi, içinde formadındaki özellik olarak gösterilir scope.

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 }

Maruz özellikler şunlardır $pristine, $dirty, $valid, $invalid, $error.

Herhangi bir nedenle hataları yinelemek istiyorsanız:

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

Hatalı her kural $ hatasıyla gösterilecektir.

İşte http://plnkr.co/edit/zCircDauLfeMcMUSnYaO?p=preview ile oynamak için bir plunkr

Hangi form alanının geçersiz olduğunu kontrol etmek için

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

bu, formun geçersiz alanlarının dizisini çıkarır

Hangi alanların doğrulamanızı bozduğunu görmek istiyorsanız ve size yardımcı olacak jQuery'ye sahipseniz, javascript konsolunda "ng-geçersiz" sınıfını aramanız yeterlidir.

$('.ng-invalid');

Herhangi bir nedenle doğrulanamayan tüm DOM öğelerini listeler.

Dönebilirsin form.$error.pattern.

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

Herhangi bir alan geçersiz olduğunda, değerini almaya çalışırsanız, o olacaktır undefined.

Diyelim ki eklenmiş bir metin girişiniz var, $scope.mynumbu sadece sayı yazdığınızda geçerli ve ABCüzerine yazdığınız zaman geçerlidir .

Değerini almaya çalışırsanız $scope.mynum, bu undefined; döndürmezdi ABC.

(Muhtemelen tüm bunları biliyorsunuzdur, ama neyse)

Dolayısıyla, kapsama eklediğim doğrulamaya ihtiyaç duyan tüm öğelere sahip bir dizi ve hangilerinin olarak döndüğünü kontrol etmek için bir filtre (örneğin, altçizgi.js ile) kullanırdım. typeof undefined .

Ve bunlar geçersiz duruma neden olan alanlar olacaktır.

Devre dışı bırakılan Kaydet düğmesi ipucundaki tüm hataları görüntülemek istedim, böylece kullanıcı uzun formu yukarı ve aşağı kaydırmak yerine neden devre dışı bırakıldığını bilecek.

Not: formunuzdaki alanlara name özelliğini eklemeyi unutmayı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();
    }

Uygulamam için şu hatayı gösteriyorum:

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

her şeyi görmek istiyorsanız, sadece aşağıdaki gibi bir şey gösterecek olan kullanıcı 'err':

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

Bu kadar iyi biçimlendirilmemiş, ama bunları orada göreceksiniz ...

Arayüzde programlama olmadan formu geçersiz kılan alan (lar) bulmak istiyorsanız, sadece sağ tıklayın (öğeler görünümünde geliştirici araçlarını açın) ve ardından bu sekme içinde ctrl + f ile ng-geçersiz'i arayın. Daha sonra, ng-geçersiz sınıfını bulduğunuz her alan için, alana gerekli olduğu sürece herhangi bir değer verilip verilmediğini veya ihlal edebileceği diğer kuralları kontrol edebilirsiniz (geçersiz e-posta biçimi, aralık dışı / maks / min tanımı, vb.) . Bu en kolay yol.