Kontrol (Input, Pilih, TextArea) adalah cara bagi pengguna untuk memasukkan data. Formulir adalah kumpulan kontrol ini, dengan tujuan pengelompokan kontrol terkait.
Formulir dan kontrol menyediakan layanan verifikasi, sehingga pengguna dapat menerima petunjuk untuk input yang tidak valid. Ini memberikan pengalaman pengguna yang lebih baik karena pengguna dapat segera mendapatkan umpan balik dan tahu cara memperbaiki kesalahan. Ingatlah bahwa sementara verifikasi klien memainkan peran penting dalam memberikan pengalaman pengguna yang baik, itu bisa dilewati, sehingga verifikasi klien tidak dapat dipercaya. Verifikasi sisi server masih diperlukan untuk aplikasi yang aman.
1. Bentuk sederhana
Petunjuk utama untuk memahami pengikatan data dua arah adalah ngModel. NgModel menyediakan pengikatan data dua arah dari model untuk melihat dan melihat ke model. Dan, itu juga menyediakan API untuk arahan lain untuk meningkatkan perilaku mereka.
<! Doctype html> <html lang = "zh-cn" ng-app = "SimpleForm"> <head> <meta charset = "utf-8"> <itement> property evaluasi </iteme> <style type = "text/css"> .ng-cloak {display: no; } </style></head><body><div ng-controller="MyCtrl"> <form novalidate> Name: <input ng-model="user.name" type="text"><br/> Email: <input ng-model="user.email" type="email"><br/> Gender: <input value="male" ng-model="user.gender" type = "Radio"> pria <input value = "betina" ng-model = "user.gender" type = "Radio"> betina <br/> <tombol ng-click = "reset ()"> kembalikan saved terakhir </button> <tombol ng-klick = "update (user)"> simpan </button> </formulir> <form pre> pre> {{{{{{{{{{{{{{{{{{pre> | JSON}} </pr Pre> <pe> disimpan = {{disimpan | JSON}} </pr Pre> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module ("SimpleForm", []); app.controller ("myctrl", function ($ scope, $ window) {$ scope.saved = {}; $ scope.update = function (user) {$ scope.saved = angular.copy (user);}; $ scope.reset = function () {$ scope.user = angular.copule.copy.copy.copy.copy () {$ scope.user = angular.copy.copy.copy.copy.copy (scope.sopy = function () {$ scope.user = angular.cule.copy $ scope.reset ();2. Menggunakan kelas CSS
Untuk membuat bentuk, kontrol dan ngmodel kaya dalam gaya, kelas berikut dapat ditambahkan:
Dalam contoh berikut, gunakan CSS untuk menampilkan validitas setiap kontrol bentuk. Dalam contoh, user.name dan user.email diperlukan, tetapi ketika mereka dimodifikasi (kotor), latar belakang akan tampak merah. Ini memastikan bahwa pengguna tidak terganggu oleh kesalahan sampai setelah berinteraksi dengan formulir (setelah pengiriman?) Dan menemukan bahwa validitasnya tidak terpenuhi.
<! Doctype html> <html lang = "zh-cn" ng-app = "cssclasses"> <head> <meta charset = "utf-8"> <itement> cssclasses </iteme> <style type = "text/css"> .ng-cloak {display: none; } .css-form input.ng-invalid.ng-dirty {latar belakang-warna: #fa787e; } .css-form input.ng-valid.ng-dirty {background-color: #78fa89; } </style> </head> <body> <div ng-controller = "myctrl"> <form novalidate name = "FormName"> Nama: <input ng-model = "user.name" type = "text" wajib> <br/> email: <input ng-model = "user.mail" type "email" diperlukan> email/email = <"gobel =" USER. "USER.MAIL" EMAIL "Dibutuhkan" Diperlukan> "Email" Diperlukan> "" "Email" NG-Model = "user.gender" type = "Radio"> pria <input value = "betina" ng-model = "user.gender" type = "Radio"> wanita <br/> <tombol ng-click = "reset ()"> reset </tombol> <tombol-k-click = "update (user)"> simpan </Tombol </form JSON}} </pr Pre> <pe> disimpan = {{disimpan | JSON}} </pr Pre> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module ("cssclasses", []); app.controller ("myctrl", function ($ scope, $ window) {$ scope.saved = {}; $ scope.update = function (user) {$ scope.saved = angular.copy (user);}; $ scope.reset = function () {$ scope.user = angular.copule.copy.copy.copy.copy () {$ scope.user = angular.copy.copy.copy.copy.copy (scope.sopy = function () {$ scope.user = angular.cule.copy $ scope.reset ();3. mengikat untuk membentuk dan mengendalikan keadaan
Dalam sudut, bentuk adalah contoh dari FormController. Contoh bentuk dapat diekspos ke ruang lingkup pada saat akan menggunakan atribut nama (saya tidak memahaminya di sini, tidak ada properti dalam ruang lingkup yang selalu dengan atribut nama bentuk, tetapi karena ada metode seperti "dokumen. Nama bentuk", itu masih dapat diperoleh). Demikian pula, kontrol adalah contoh dari NgmodelController. Control instance dapat diekspos bentuk serupa menggunakan atribut nama. Ini menunjukkan bahwa sifat internal dari kedua bentuk dan kontrol layak untuk mengikat tampilan menggunakan primitif pengikat standar.
Ini memungkinkan kami untuk memperluas contoh di atas dengan fitur berikut:
<! Doctype html> <html lang = "zh-cn" ng-app = "controlState"> <adap> <meta charset = "utf-8"> <itement> controlstate </iteme> <style type = "text/css"> .ng-cloak {display: no; } .css-form input.ng-invalid.ng-dirty {latar belakang-warna: #fa787e; } .css-form input.ng-valid.ng-dirty {background-color: #78fa89; } </tyle> </head> <body> <v ng-controller = "myctrl"> <form novalidate name = "formname"> Nama: <input ng-model = "user.name" name = "name" type = "Text" wajib> <br/> <div ng-show = "formname.usname. Nama </span> </div> Email: <input ng-model = "user.email" name = "useremail" type = "email" wajib> <br/> <div ng-show = "formname.useremail. $ formname.useremail. <span ng-show = "formname.useremail. $ error.email"> Ini bukan email yang valid </span> </div> jenis kelamin: <input value = "laki-laki" ng-model = "user.gender" type = "radio"> nilainya <input value = "wanita" ng-model = "user.gender" type = "Radio"> Radio ">" NG-Model = "User. NG-MODEL = "user.agree" name = "userAgree" wajib/> Saya setuju: <input type = "text" ng-show = "user.agree" ng-model = "user.agreesign" diperlukan/> <div ng-show = "! formname.useragree ||! user.agreesign"> tolong setujui dan tandai ~ " ng-disabled = "isunchanged (user)"> reset </atton> <button ng-click = "update (user)" ng disabled = "formname. $ tidak valid || isunchanged (user)"> save </button> </form> <pe> form = {{user | JSON}} </pr Pre> <pe> disimpan = {{disimpan | JSON}} </pr Pre> </div> <script src = "../ angular-1.0.1.js" type = "Text/JavaScript"> </script> <script type = "text/javascript"> var app = angular.module ("controlstate", []); app.controller ("myctrl", function ($ scope, $ window) {$ scope.saved = {}; $ scope.update = function (user) {$ scope.saved = angular.copy (user);}; $ scope.reset = function () {$ scope.user = angular.cope. = function) {return angular.equals (pengguna, $ scope.saved);4. Validasi Kustom
Angular menyediakan implementasi untuk sebagian besar bidang formulir HTML publik (input, teks, nomor, URL, email, radio, kotak centang) jenis, dan ada juga arahan (diperlukan, pola, inlength, maxlength, min, max) untuk verifikasi formulir.
Kita dapat mendefinisikan plug-in verifikasi kita sendiri dengan mendefinisikan arahan di NGModel Controller (apakah ini NGModelController yang terhubung bersama?). Untuk mendapatkan pengontrol, Arahan menentukan dependensi seperti pada contoh berikut (Directive mendefinisikan atribut yang diperlukan dalam objek).
Model untuk melihat pembaruan - Setiap kali model berubah, semua fungsi di NgModelController. $ Formatters (memicu validasi data dan pemformatan konversi ketika model berubah) array akan diantar untuk dieksekusi, sehingga setiap fungsi di sini memiliki peluang untuk memformat nilai model dan memodifikasi status verifikasi kontrol melalui NGModelController. (http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngmodel.ngmodelcontroller#$setSvalidity).
Lihat untuk Memodelkan Pembaruan - Cara yang serupa, tidak peduli setiap kali pengguna berinteraksi dengan kontrol, akan memicu NgModelController. $ SetViewValue. Sekarang giliran untuk mengeksekusi NGModelController $ parsers (ketika kontrol memperoleh nilai dari DOM, semua metode dalam array ini akan dieksekusi, nilai -nilai akan ditinjau, disaring atau dikonversi, dan juga diverifikasi).
Dalam contoh berikut kami akan membuat dua arahan.
Yang pertama adalah integer, yang bertanggung jawab untuk memverifikasi apakah inputnya adalah bilangan bulat yang valid. Misalnya, 1.23 adalah nilai ilegal karena berisi bagian pecahan. Perhatikan bahwa kami menggunakan Unshift untuk menggantikan mendorong ekor dengan memasukkannya ke kepala array, karena kami ingin mengeksekusi terlebih dahulu dan menggunakan nilai kontrol ini (memperkirakan bahwa array digunakan sebagai antrian), kami perlu menjalankan fungsi verifikasi sebelum transformasi terjadi.
Petunjuk kedua adalah smart-float. Dia mengubah "1.2" dan "1,2" menjadi nomor poin mengambang legal "1.2". Perhatikan bahwa kami tidak dapat menggunakan HTML5 Input Type "Number" di sini, karena browser tidak mengizinkan pengguna untuk memasukkan karakter ilegal yang kami harapkan, seperti "1,2" (hanya mengenali "1.2").
<! Doctype html> <html lang = "zh-cn" ng-app = "customValidation"> <head> <meta charset = "utf-8"> <itement> customValidation </iteme> <style type = "text/css"> .ng-cloak {display: none; } .css-form input.ng-invalid.ng-dirty {latar belakang-warna: #fa787e; } .css-form input.ng-valid.ng-dirty {background-color: #78fa89; } </style></head><body><div> <form novalidate name="formName"> <div> Size (integer 0 - 10):<input integer type="number" ng-model="size" name="size" min="0" max="10"/>{{size}}<br/> <span ng-show="formName.size.$error.integer">This is not Integer yang valid </span> <span ng-show = "formname.size. $ error.min || formname.size. $ error.max"> nilainya harus antara 0 dan 10 </span> </div> <v> <ver "panjang): <input type =" Text "NG-Model =" Length "Panjang" Panjang "Panjang" Panjang " ng-show = "FormName.length.0Error.Float"> Ini bukan nomor floating point yang valid </span> </div> </form> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </skrip> <script type = "teks/javascript"> varibript (script> </script> <skrip = "teks/javascript"> varibript (script> </script> <skrip = "javascript"> varulcript "> varulcript"> varulcript "> var integer_regexp =/^/-?/d*$/; app.directive ("integer", function () {return {membutuhkan: "ngModel", // tautan ngModelController: function (scope, eLe, attrs, ctrl) {ctrl. $ parsers.unshift (function (viewValue) {// $ parsers, pembaruan dari tayangan ke {viewValue (viewValue) {// $ parsers) // BERKIRI dan Pastikan untuk Ctrl. var float_regexp = /^/-?/d+(?:$.,$/d+)?$/; app.directive ("SmartFloat", function () {return {membutuhkan: "ngModel", link: function (lingkup, ele, attrs, ctrl) {ctrl. $ parsers.unshift (function (viewValue) {if (float_regexp.test (viewValue)) {ctrl. $ " Parsefloat (ViewValue.Replace (",", "."));5. Menerapkan Kontrol Formulir Kustom (Menggunakan NGModel)
Angular mengimplementasikan kontrol dasar semua HTML (Input, Select, TextArea) dan kompeten untuk sebagian besar skenario. Namun, jika kita perlu lebih fleksibel, kita dapat mencapai tujuan menyesuaikan kontrol formulir dengan menulis arahan.
Untuk mengembangkan kontrol dan ngmodel untuk bekerja bersama dan mengimplementasikan pengikatan data dua arah, itu membutuhkan:
Menerapkan metode render adalah metode yang bertanggung jawab untuk memberikan data setelah mengeksekusi dan melewati semua NgModelController. $ Metode Formatters.
Hubungi metode $ setViewValue, dan model perlu diperbarui sebagai respons tidak peduli kapan pengguna berinteraksi dengan kontrol. Ini biasanya diimplementasikan dalam pendengar acara DOM.
Anda dapat melihat $ compileProvider.Direktif untuk informasi lebih lanjut.
Contoh berikut menunjukkan cara menambahkan fitur pengikatan data dua arah ke elemen yang dapat diedit.
<! Doctype html> <html lang = "zh-cn" ng-app = "customControl"> <head> <meta charset = "utf-8"> <itement> customControl </iteme> <style type = "text/css"> .ng-cloak {no pajangan: Tidak Ada; } div [ContentEditable] {cursor: pointer; Latar Belakang-Color: #D0D0D0; } </style></head><body ng-controller="MyCtrl"><div> <div contenteditable="true" ng-model="content">My Little Dada</div> <pre>model = {{content}}</pre> <button ng-click="reset()">reset model tirgger model to view($render)</button></div><script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module ("CustomControl", []); app.controller ("myctrl", function ($ scope) {$ scope.reset = function () {$ scope.content = "my little dada"; // cara mendapatkan ngmodelcontroller di sini? Jika Anda tahu, saya harap Anda dapat memberi saya beberapa saran! Terima kasih};}); app.directive ("ContentEditable", function () {return {membutuhkan: "ngModel", link: function (scope, eLe, attrs, ctrl) {// view -> model ele.bind ("blur keyup", function () {scope. $ function (function () {console.log ("setvalviewe () {scope. $ function (function () {console.log (" setvalViewe () {scope.) Ctrl. SetViewValue (ELE.TEXT ()); }); </script> </body> </html>