Baru -baru ini, bug yang tersisa dari komponen yang dipelihara di tangan adalah verifikasi bentuk, dan logika di dalam kode verifikasi bentuk perusahaan tidak jelas untuk generasi, dan struktur kode tidak terlalu sudut.
Sangat penting untuk memiliki pemahaman mendalam tentang verifikasi bentuk.
<body ng-controller = "maincontroller"> <form name = "form" novalidate = "novalidate"> <input name = "text" type = "email" ng-model = "name"> </form> </body>
Ngmodel adalah sihir hitam sudut, yang mewujudkan ikatan dua arah. Ketika nilai nama berubah, nilai input juga akan berubah.
Ketika input pengguna mengubah nilai, nilai nama juga akan berubah.
Tujuan Novalidate = "Novalidate" adalah untuk menghapus verifikasi formulir yang datang dengan sistem.
Setelah parsing kode di atas, Angular akan menghasilkan "bentuk" variabel dan $ scope.Form di bawah $ SCOPE OF MAINCTROLLER. Nama variabel ini sama dengan Form.Name di HTML.
Dan $ scope.form.text adalah model kotak input teks, diwarisi dari ngmodelcontroller.
Di mana $ scope.form instance berasal dari formcontroller. Kontennya adalah:
Model (yaitu, $ scope.form.text) dari kotak input teks adalah:
di mana $ kotor/$ pristine, $ valid/$ tidak valid, $ error adalah atribut umum. Terutama $ error.
Verifikasi bentuk termudah:
Setelah memahami bentuk dan kotak input, Anda dapat mengedit perintah paling sederhana untuk menampilkan kesalahan.
Konten HTML adalah sebagai berikut:
<form name = "Form" novalidate = "novalidate"> <input name = "text" type = "email" ng-model = "name" error-tip> </form>
Kode perintah adalah sebagai berikut:
// Ketika kesalahan kotak input terjadi, kesalahan ditampilkan directive ("errortip", function ($ compile) {return {restrict: "a", membutuhkan: "ngmodel", tautan: fungsi ($ scope, $ element, $ attrs, $ ngmodel) {// buat subscopevar subscope subscope = $ scope. ng-if = "haserror ()"> {{errors () |. {email: true, xxx: true, xxxx: trie} $ scope.errors = function () {return $ ngModel. $ error;} // kompilasi instruksi yang salah dan masukkan ke dalam kotak input setelah $ element.after ($ compile (tip) (subscope));}}});Mari kita lihat hasil eksekusi terlebih dahulu:
Saat memasukkan alamat email yang tidak valid:
Saat memasukkan alamat email yang benar:
Arahan Errortip dimulai dengan mendapatkan NgmodelController melalui membutuhkan: "Ngmodel". Kemudian buat elemen untuk menampilkan kesalahan ke dalam kotak input.
$ Compile digunakan di sini, dan $ Compile digunakan untuk secara dinamis mengkompilasi dan menampilkan konten HTML.
Ketika ada konten kesalahan, elemen yang salah akan ditampilkan.
Mengapa Subscope Access HaserRor dan Metode Kesalahan?
Karena rantai prototipe. Lihat saja gambar di bawah ini untuk diketahui.
Kustomisasi Konten Kesalahan
Oke, jelas bahwa verifikasi bentuk tidak tersedia sekarang. Kita harus menyesuaikan konten kesalahan yang akan ditampilkan, dan ada lebih dari satu kesalahan yang akan ditampilkan.
Gunakan NG-RePeat untuk menampilkan beberapa kesalahan, yaitu, gunakan perintah "Errortip"
tip = '<span ng-if = "haserror ()"> {{errors () | json}} </span> ';Ubah ke:
tip = '<ul ng-if = "haserror ()" ng-repeat = "(errorKey, errorValue) di errors ()">' +'<span ng-if = "errorValue"> {{errorKey | errorFilter}} </span> ' +' </ul> ';di mana ErrorFilter adalah filter untuk tampilan khusus pesan kesalahan. Filter sebenarnya adalah fungsi.
Kodenya adalah sebagai berikut:
.filter ("errorFilter", function () {return function (input) {var errormessageSmap = {email: "Harap masukkan alamat email yang benar", xxoo: "Tidak cocok untuk anak -anak"} return errorMessageSmap [input];}});Hasilnya adalah sebagai berikut:
Oke, di sini kita dapat menangani verifikasi bentuk "sederhana". Ya, sederhana. Kita harus terus masuk lebih dalam.
Verifikasi Formulir Kustom!
Kemudian mari kita terapkan verifikasi formulir yang tidak dapat dimasukkan dalam "pria tampan".
Instruksi adalah sebagai berikut:
.directive ("donotinputhandsomeboy", function ($ compile) {return {restrict: "a", membutuhkan: "ngmodel", tautan: fungsi ($ scope, $ element, $ attrs, $ ngmodel) {$ ngModel. $ parsers.push (function (value) {value === TO $ "ke handsome." tidak valid, $ error akan menjadi {tampan: true} $ ngModel. $ setValidity ("tampan", false);} nilai pengembalian;})}}}))Hasilnya adalah sebagai berikut:
Ada dua hal penting di sini, $ ngmodel. $ Parsers dan $ ngmodel. $ SetValidity.
$ ngmodel. $ parsers adalah array. Saat memasukkan konten di kotak input, itu akan melintasi dan menjalankan fungsi dalam $ parsers.
$ ngModel. $ setValidity ("tampan", false); Pengaturan tampan untuk tidak valid akan mengatur $ ngModel. $ Error ["tampan"] = true;
Hapus $ ngModel. $$ SUCCESS ["Handsome"] juga diatur, dan Anda dapat mencari kode sumber untuk detailnya.
Di sini saya akan meringkas prosesnya.
-> Input Pengguna
-> Angular mengeksekusi semua fungsi dalam $ parsers
-> Periksa $ setValidity ("xxoo", false); maka xxoo akan diatur ke $ ngModel. $ error ["xxoo"]
-> Lalu instruksi Errortip akan mengubah $ ngModel. $ Error
-> errorFilter akan luput dari pesan kesalahan
-> Pesan kesalahan ditampilkan di akhir
Kustomisasi konten tampilan kotak input
Sering kali, pengembangan tidak sesederhana memverifikasi kesalahan dan menampilkan kesalahan. Terkadang kita harus memformat isi kotak input.
Misalnya, "1000" ditampilkan sebagai "1.000"
"halo" muncul sebagai "halo"
Sekarang mari kita terapkan inisial otomatis.
Kode sumber adalah sebagai berikut:
<form name = "Form" novelidate = "novalidate"> <input name = "text" type = "text" ng-model = "name" case atas> </form> .directive ("Uppercase", function () {return {Batasi: "a", membutuhkan: "ngmodel", tautan: fungsi ($ scope, $ element, $ attrs, $ ngModel) {$ ngModel. $ parsers.push (function (view) {var viewValue; if (angular.isundefined (value)) {viewValue = "; viewValue [0] .tuppercase () + viewValue.substring (1); // Atur konten antarmuka $ ngModel. $ setViewValue (viewValue); // sumber daya ke antarmuka, fungsi ini sangat penting $ ngModel. $ render ();Di sini kami menggunakan $ setViewValue dan $ render, $ setViewValue untuk mengatur ViewValue ke nilai yang ditentukan, dan $ render menampilkan ViewValue ke antarmuka.
Banyak orang berpikir bahwa menggunakan $ setViewValue dapat memperbarui antarmuka, tetapi mereka tidak menggunakan $ render, dan pada akhirnya, antarmuka belum disegarkan apa pun yang dilakukannya.
Jika hanya $ Ngmodel. $ Parsers tidak cukup, $ parsers hanya dipicu ketika pengguna memasukkan konten baru di kotak input. Situasi lain adalah bahwa konten kotak input perlu disegarkan:
Itu adalah dua arah yang mengikat. Misalnya, kotak input baru saja terikat ke $ scope.name di MainController. Ketika pengguna mengubah $ scope.name menjadi "halo" dengan cara lain, kapitalisasi huruf pertama tidak dapat dilihat di kotak input.
Saat ini, Anda perlu menggunakan $ formatters, jadi mari kita lihat contoh terlebih dahulu.
<body ng-controller = "MainController"> <form name = "Form" novalidate = "novalidate"> <button ng-click = "random ()"> acak </button> <input name = "text" type = "text" ng-model = "Nama" case atas> </form> </body> body>
Konten MainController:
angular.module ("app", []). controller ("MainController", function ($ scope, $ timeout) {$ scope.random = function () {$ scope.name = "hello" + math.random ();}})Cukup sederhana. Saat Anda mengklik tombol, $ scope.name menjadi konten acak yang dimulai dengan halo.
Jelas bahwa surat awal Hello tidak dikapitalisasi, bukan yang kita inginkan.
Kami memodifikasi konten dari perintah berikut:
.directive ("Uppercase", function () {return {restrict: "a", membutuhkan: "ngmodel", tautan: fungsi ($ scope, $ element, $ attrs, $ ngModel) {$ ngModel. $ parsers.push (function (value) {var viewValue = UppercasefireR (function (value) {var viewValue = UppercaseFir. $ ngModel. $ setViewValue (viewValue); // Render ke antarmuka, fungsi ini sangat penting $ ngModel. $ render (); tidak terdefinisi dan konversi semua konten menjadi fungsi string handleemptyvalue (value) {return angular.isundefined (nilai)? "Singkatnya:
1.
-> Pengguna memasukkan konten di kotak input
-> Sudut Traversal dari Fungsi di $ Ngmodel. $ Parsers Mengubah Konten Input, dan kemudian mengaturnya menjadi $ NgModel. $ ModelValue
-> Dalam fungsi di $ ngmodel. $ Parsers array, kami memodifikasi $ NGModel. $ ViewValue, dan kemudian $ ngMode. $ Render () membuat konten.
2.
-> menghasilkan string acak melalui tombol untuk ditetapkan
-> Setiap kali deteksi kotor akan menentukan apakah nilai nama tersebut tidak konsisten dengan $ Ngmodel. $ ModelValue (di sini diimplementasikan menggunakan $ watch). Jika yang tidak konsisten, beralih melalui semua fungsi dalam $ format dalam urutan terbalik dan mengeksekusi, dan menetapkan nilai pengembalian akhir ke $ ngModel. $ ViewValue
-> Segarkan konten kotak input
Dapatkah contoh "Kustomisasi konten tampilan kotak input" dioptimalkan?
Mengapa mengoptimalkan?
Alasannya sangat sederhana. Untuk mengimplementasikan "konten khusus", $ parsers dan $ formatters digunakan. Bahkan, isi keduanya sangat mirip! Ini sangat penting.
Bagaimana cara mengoptimalkan?
Gunakan $ ngModel. $ Validators.
Oke, sekarang ubah contohnya.
.directive ("Uppercase", function () {return {restrict: "a", membutuhkan: "ngModel", tautan: fungsi ($ scope, $ element, $ attrs, $ ngModel) {// 1.3 didukung. Apakah Anda masuk secara manual atau memperbarui model model melalui tempat lain, $ ngmodel. $ validators. = UppercaseFirstword (handleemptyValue (ModelValue)); // Setel konten antarmuka $ ngModel. $ setViewValue (viewValue); // sumber daya ke antarmuka, fungsi ini sangat penting untuk tidak ada. HandleMedValue (nilai) {return angular.isundefined (nilai)? "Kode ini jauh lebih sederhana, hanya didukung oleh $ ngModel. $ Validators di versi 1.3 atau lebih.
Jika nilai pengembalian $ ngModel. $ Validators.uppercase fungsi false, maka $ ngModel. $ Error ['Uppercase'] = true. Ini mirip dengan $ ngModel. $ SetValidity ("huruf besar", false).