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

94

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?

validation angularjs GSto
sumber

Jawaban:

92

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

Umur Kontacı
sumber
5
Peringatan bagi orang lain yang jatuh ke dalam perangkap saya - Anda harus menentukan nameatribut input untuk melihatnya di $ name (tentu saja). Fakta bahwa AngularJS mengikat ke properti model tanpa memerlukan nama dapat menyebabkan sulitnya mendiagnosis input mana yang tidak valid.
Bernhard Hofmann
Petunjuk menggunakan objek $ scope untuk menentukan bidang mana yang membuat formulir tidak valid membantu saya.
Ram
26

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

Shivek Parmar
sumber
15

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.

Thassae Santos
sumber
12

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;
            ....
        }
    });
}
zs2020
sumber
2
Ini berhasil untuk saya, kecuali sebagai pengganti formulir. $ Error.pattern, saya menggunakan formulir. $ Error.required. Tidak ada properti "pola". Apakah itu berubah atau sesuatu?
Anthony
3
@Anthony yang bergantung pada jenis validasi =) lihat yearofmoo.com/2014/09/…
oCcSking
2

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.

chris-l
sumber
1
Bergantung pada model validasi yang digunakan (mis. Validator khusus) mungkin tidak selalu tidak ditentukan saat tidak valid.
Stewie
@Stewie Hmm ya, itu benar sekali. Saya kira itu tidak bekerja pada setiap kasus. ^ _ ^
chris-l
2

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();
    }
Sebastian Castaldi
sumber
2

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 ...

kacau
sumber
1

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.

ozanmut
sumber