AngularJS: Apakah ada cara untuk menentukan bidang mana yang membuat formulir tidak valid?

Saya memiliki kode berikut dalam aplikasi AngularJS, di dalam pengontrol, yang dipanggil dari fungsi ng-submit, yang termasuk dalam formulir dengan nama profileForm:

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

Di dalam fungsi ini, adakah cara untuk mengetahui bidang mana yang menyebabkan seluruh formulir disebut tidak valid?

Setiap nameinformasi validasi masukan ditampilkan sebagai properti di formnama discope .

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 }

Sifat-sifat yang terkena adalah $pristine, $dirty, $valid, $invalid, $error.

Jika Anda ingin mengulangi kesalahan karena beberapa alasan:

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

Setiap aturan yang salah akan diekspos dalam $ error.

Ini plunkr untuk dimainkan dengan http://plnkr.co/edit/zCircDauLfeMcMUSnYaO?p=preview

Untuk memeriksa bidang formulir mana yang tidak valid

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

ini akan menampilkan larik bidang yang tidak valid dari formulir

Jika Anda ingin melihat kolom mana yang mengacaukan validasi Anda dan Anda memiliki jQuery untuk membantu Anda, cukup cari kelas "ng-invalid" di konsol javascript.

$('.ng-invalid');

Ini akan mencantumkan semua elemen DOM yang gagal validasi karena alasan apa pun.

Anda dapat mengulang form.$error.pattern.

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

Ketika ada bidang yang tidak valid, jika Anda mencoba mendapatkan nilainya, itu akan menjadi undefined.

Katakanlah Anda memiliki input teks yang dilampirkan $scope.mynumyang hanya valid ketika Anda mengetik angka, dan Anda telah mengetik ABCdi atasnya.

Jika Anda mencoba mendapatkan nilai $scope.mynum, itu akan menjadi undefined; itu tidak akan mengembalikan ABC.

(Mungkin Anda tahu semua ini, tapi bagaimanapun)

Jadi, saya akan menggunakan array yang memiliki semua elemen yang membutuhkan validasi yang telah saya tambahkan ke ruang lingkup dan menggunakan filter (dengan underscore.js misalnya) untuk memeriksa mana yang kembali sebagai typeof undefined .

Dan itu akan menjadi bidang yang menyebabkan status tidak valid.

Saya ingin menampilkan semua kesalahan di tooltip tombol Simpan yang dinonaktifkan, sehingga pengguna akan tahu mengapa menonaktifkan alih-alih menggulir ke atas dan ke bawah formulir panjang.

Catatan: ingatlah untuk menambahkan properti nama ke bidang di formulir Anda

    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();
    }

Untuk aplikasi saya, saya menampilkan kesalahan seperti ini:

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

jika Anda ingin melihat semuanya, cukup pengguna 'err' yang akan menampilkan sesuatu seperti ini:

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

Tidak dalam format yang baik, tetapi Anda akan melihat hal-hal ini di sana ...

Jika Anda ingin menemukan bidang yang membuat formulir tidak valid pada UI tanpa terprogram, cukup klik kanan inspect (buka alat pengembang di tampilan elemen) lalu cari ng-invalid dengan ctrl + f di dalam tab ini. Kemudian untuk setiap bidang yang Anda temukan kelasnya tidak valid, Anda dapat memeriksa apakah bidang tersebut tidak diberi nilai apa pun saat diperlukan, atau aturan lain yang mungkin dilanggar (format email tidak valid, definisi di luar rentang / maks / menit, dll.) . Ini cara termudah.