Cara membuat arahan berasaskan borang di AngularJS

mata teras

Buat komponen bentuk yang boleh diguna semula menggunakan arahan AngularJS.
Melaksanakan kaedah pengesahan tersuai dalam arahan untuk mengendalikan pengesahan input kompleks, memastikan integriti data sebelum diserahkan kepada pelayan.
Gunakan teknologi pengesahan bentuk terbina dalam AngularJS (seperti
• dan ng-required) dengan cepat menubuhkan pengesahan input pelanggan. ng-pattern
Gunakan
• di AngularJS untuk menguruskan status borang dan pengesahan untuk memberi pengguna maklum balas segera dan meningkatkan pengalaman pengguna. FormController
Gunakan arahan
• untuk mengendalikan penyerahan borang dalam AngularJS, menyekat tingkah laku penyerahan lalai, dan membolehkan logik pengesahan tersuai sebelum menghantar data ke pelayan. ng-submit

Ramai pemaju menghadapi cabaran yang unik apabila melaksanakan kekangan perniagaan yang kompleks pada data yang dikemukakan pengguna. Baru -baru ini, pasukan saya menghadapi cabaran ini ketika saya menulis permohonan di GiftCards.com. Kami perlu mencari cara untuk membolehkan pelanggan kami mengedit pelbagai produk dalam satu pandangan, masing -masing dengan peraturan pengesahan tersendiri.

Ini membuktikan mencabar kerana ia memerlukan kita menggunakan tag pelbagai

dalam kod sumber HTML dan mengekalkan model pengesahan untuk setiap contoh bentuk. Sebelum kita mencari penyelesaian, kami mencuba banyak kaedah, seperti menggunakan <form></form> untuk memaparkan subforms. Akhirnya, kami membuat arahan untuk setiap jenis produk (setiap arahan mempunyai ngRepeat dalam pandangannya) dan mempunyai arahan yang mengikat kepada pengawal induknya. Ini membolehkan kita memanfaatkan warisan bentuk ibu bapa dan anak Angular untuk memastikan bahawa bentuk induk hanya sah jika semua bentuk kanak-kanak sah. Dalam tutorial ini, kami akan membina skrin semakan produk mudah (menonjolkan komponen utama aplikasi semasa kami). Kami akan mempunyai dua produk, masing -masing dengan arahan sendiri dan setiap produk mempunyai peraturan pengesahan yang unik. Akan ada butang checkout yang mudah, yang akan memastikan kedua -dua borang itu sah. <form></form>

Jika anda ingin melihat bagaimana ia berfungsi, anda boleh melompat terus ke demo kami atau memuat turun kod dari repositori GitHub kami.

Mengenai perintah Arahan

adalah sekeping kod HTML yang berjalan melalui pengkompil HTML AngularJS (

) dan dilampirkan ke DOM. Pengkompil bertanggungjawab untuk melintasi DOM dan mencari komponen yang dapat ditukar menjadi objek menggunakan arahan berdaftar yang lain. Arahan bekerja dalam skop terpencil dan mengekalkan pandangan mereka sendiri. Mereka adalah alat yang berkuasa yang memudahkan komponen yang boleh diguna semula yang boleh dikongsi sepanjang aplikasi. Untuk semakan cepat, lihat artikel ini atau dokumentasi AngularJS. $compileArahan

menyelesaikan masalah asas kami dalam dua cara: pertama, setiap contoh mempunyai skop terpencil; Arahan terbina dalam ini membolehkan pelbagai elemen borang bersarang untuk menerima atribut ngForm pilihan untuk memberi instantiate name dan akan mengembalikan objek borang. FormController

Mengenai FormController

Apabila pengkompil mengiktiraf apa -apa objek bentuk dalam DOM, ia akan memberi insteriate objek

menggunakan arahan ngForm. Pengawal ini akan mengimbas semua elemen input, pemilihan, dan teks dan membuat kawalan yang sepadan. Kawalan memerlukan harta model untuk menubuhkan pengikatan data dua hala dan membolehkan maklum balas pengguna segera melalui pelbagai kaedah pengesahan pra-dibina. Memberi maklum balas segera kepada pengguna, membolehkan mereka mengetahui maklumat yang sah sebelum membuat permintaan HTTP. FormController

Kaedah pengesahan prebuilt

Pakej Angular 14 Kaedah pengesahan standard. Ini termasuk

, min, max dan validator lain. Mereka dibina untuk memahami dan memanipulasi hampir semua jenis input HTML5 dan bersesuaian dengan penyemak imbas. required

<code class="language-html"><input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span></code>

Contoh di atas menunjukkan cara menggunakan validator arahan

dalam sudut. Pengesahan ini memastikan bahawa bidang diisi sebelum ia dianggap sah. Ia tidak mengesahkan sebarang data, ia hanya pengguna memasukkan sesuatu. Mempunyai atribut ngRequired bermaksud bahawa penyemak imbas tidak boleh mengesahkan apabila mengemukakan. novalidate

tip pro: Jangan tetapkan atribut

pada mana -mana bentuk sudut. Ini akan menghalang Angular daripada cuba memastikan borang itu tidak diserahkan dalam perjalanan. action

Kaedah pengesahan tersuai

Angular menyediakan API yang luas untuk membantu membuat peraturan pengesahan tersuai. Dengan API ini, anda boleh membuat dan melanjutkan peraturan pengesahan anda sendiri untuk input kompleks yang tidak dilindungi dalam pengesahan standard. Pasukan saya bergantung pada beberapa kaedah pengesahan tersuai untuk menjalankan corak ekspresi biasa yang digunakan oleh pelayan kami. Tanpa keupayaan untuk menjalankan pencocokan ekspresi biasa yang kompleks, kami boleh menghantar data yang salah ke pelayan backend. Ini akan menunjukkan kesilapan kepada pengguna, mengakibatkan pengalaman pengguna yang buruk. Pengesahan tersuai menggunakan sintaks arahan dan perlu disuntik

. Maklumat lanjut boleh didapati dengan berunding dengan dokumentasi AngularJS. ngModel

Buat pengawal

Sekarang, kita boleh memulakan permohonan kami. Anda boleh mendapatkan gambaran keseluruhan kod pengawal di sini.

Pengawal akan berada di tengah -tengah perkara. Ia hanya mempunyai beberapa tanggungjawab - pandangannya akan mempunyai elemen bentuk bernama

, ia hanya mempunyai satu atribut, dan kaedahnya akan termasuk parentForm, registerFormScope dan validateChildForm. checkout

Properties Controller

kita memerlukan harta dalam pengawal:

<code class="language-html"><input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span></code>

Harta ini digunakan untuk mengekalkan keadaan boolean kesahihan keseluruhan bentuk. Kami menggunakan harta ini untuk melumpuhkan statusnya selepas mengklik butang checkout.

Kaedah: RegisterFormScope

<code class="language-javascript">$scope.formsValid = false;</code>

Apabila

dipanggil, registerFormScope dan ID arahan unik yang dibuat dalam instansiasi arahan diserahkan kepadanya. Kaedah ini kemudian menambahkan skop borang ke ibu bapa FormController. FormController

Kaedah: validatechildform

Kaedah ini akan digunakan untuk menyelaras dengan pelayan backend yang melakukan pengesahan. Ia dipanggil apabila pengguna menyunting kandungan dan memerlukan pengesahan tambahan. Secara konseptual, kami tidak membenarkan arahan untuk melaksanakan komunikasi luaran.

Sila ambil perhatian bahawa untuk tujuan tutorial ini, saya meninggalkan komponen backend. Sebaliknya, saya menolak atau menghuraikan janji berdasarkan sama ada jumlah yang dimasukkan oleh pengguna berada dalam julat tertentu (Produk A ialah 10-50 dan Produk B ialah 25-500).

<code class="language-javascript">$scope.registerFormScope = function (form, id) {
  $scope.parentForm['childForm'+id] = form;
};</code>

Menggunakan perkhidmatan

membolehkan arahan untuk mematuhi antara muka dengan status kejayaan dan kegagalan. Sifat antara muka aplikasi antara "Edit" dan "Simpan" bergantung kepada penyuntingan data model. Harus diingat bahawa data model dikemas kini dengan segera apabila pengguna mula menaip. $q

Kaedah: checkout

Klik "Checkout" untuk menunjukkan bahawa pengguna telah menyelesaikan penyuntingan dan mahu checkout. Item yang boleh diambil tindakan ini memerlukan pengesahan bahawa semua borang yang dimuatkan dalam Arahan disahkan sebelum data model boleh dihantar ke pelayan. Skop artikel ini tidak termasuk kaedah untuk menghantar data ke pelayan. Saya menggalakkan anda untuk meneroka menggunakan perkhidmatan

untuk semua komunikasi pelanggan-ke-pelayan. $http

<code class="language-javascript">$scope.validateChildForm = function (form, data, product) {
  // 重置表单，使其不再有效
  $scope.formsValid = false;
  var deferred = $q.defer();

  // 验证表单和数据的逻辑
  // 必须在promise上返回resolve()或reject()。
  $timeout(function () {
    if (angular.isUndefined(data.amount)) {
      return deferred.reject(['amount']);
    }

    if ((data.amount < product.minAmount) || (data.amount > product.maxAmount)) {
      return deferred.reject(['amount']);
    }

    deferred.resolve();
  });
  return deferred.promise;
}</code>

Kaedah ini menggunakan keupayaan Angular, dan bentuk kanak -kanak boleh membatalkan borang induk. Bentuk induk dinamakan

dengan jelas menggambarkan hubungannya dengan bentuk anak. Apabila borang kanak -kanak menggunakan kaedah parentForm, ia secara automatik akan naik ke borang induk untuk menetapkan kesahihan di sana. Semua borang dalam $setValidity mesti sah, dan atribut dalaman mereka mestilah benar. parentForm $valid

Buat arahan kami

Arahan kami mesti mengikuti antara muka yang sama yang membolehkan interoperabilitas dan skalabiliti penuh. Nama arahan kami bergantung kepada produk yang mereka ada.

Anda boleh mencari gambaran keseluruhan kod arahan di sini (produk A) dan di sini (produk B).

Skop arahan pengasingan

Setiap arahan instantiated akan mendapat skop terpencil yang dilokalkan kepada arahan dan tidak mempunyai sifat luaran yang diketahui. Walau bagaimanapun, AngularJS membolehkan penciptaan arahan yang menggunakan kaedah dan sifat skop induk. Apabila melepasi sifat luaran ke skop tempatan, anda boleh menunjukkan bahawa anda ingin menyediakan pengikatan data dua hala.

Aplikasi kami akan memerlukan beberapa kaedah dan sifat mengikat data dua hala luaran:

Kaedah: RegisterFormScope

<code class="language-javascript">$scope.checkout = function () {
  if($scope.parentForm.$valid) {
    // 连接服务器以发布数据
  }
  $scope.formsValid = $scope.parentForm.$valid;
};</code>

Hartanah pertama dalam skop tempatan Arahan adalah kaedah untuk mendaftarkan skop tempatan.Form kepada pengawal. Arahan memerlukan saluran paip untuk lulus objek

tempatan ke pengawal utama.

Objek: GiftData

Ini adalah data model berpusat yang akan digunakan dalam paparan arahan. Maklumat ini akan mengikat data dua arah untuk memastikan bahawa kemas kini yang berlaku dalam FormController akan menyebarkan kepada pengawal utama.

Kaedah: ValidateChildForm

Kaedah ini adalah sama seperti yang ditakrifkan dalam pengawal. Kaedah ini dipanggil apabila pengguna mengemas kini maklumat dalam paparan Arahan.

Objek: Produk

Objek ini mengandungi maklumat mengenai produk yang dibeli. Demonstrasi kami menggunakan objek yang agak kecil dengan hanya beberapa sifat. Permohonan dunia sebenar saya mempunyai banyak maklumat untuk membuat keputusan dalam permohonan itu. Ia diluluskan ke validateChildForm untuk menyediakan konteks kandungan yang disahkan.

Pautan Arahan

Arahan kami akan menggunakan fungsi postLink dan lulus objek skop. Di samping itu, fungsi postLink juga menerima beberapa parameter lain. Mereka adalah seperti berikut:

1. scope - Digunakan untuk mengakses skop pengasingan yang dibuat untuk setiap contoh arahan.
2. iElement - Digunakan untuk mengakses item elemen. Ia selamat untuk mengemas kini dan mengubah suai elemen dari fungsi postLink dalam elemen yang diperuntukkan.
3. iAttrs - Digunakan untuk mengakses sifat pada tag yang sama arahan instantiasi.
4. controller - Jika kebergantungan pengawal luaran wujud, ia boleh digunakan dalam fungsi pautan. Ini mestilah sesuai dengan atribut require objek arahan.
5. transcludeFn - Fungsi ini sama dengan fungsi yang disenaraikan dalam parameter $transclude objek arahan.

link Bertanggungjawab melampirkan semua pendengar DOM dan mengemas kini DOM dengan elemen paparan.

<code class="language-html"><input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span></code>

Daftar Skop Borang

<code class="language-javascript">$scope.formsValid = false;</code>

Kaedah pembungkus registerFormScope dalam $timeout akan melambatkan pelaksanaannya sehingga akhir timbunan pelaksanaan. Ini menyediakan pengkompil dengan masa yang cukup untuk melengkapkan semua pautan yang diperlukan antara pengawal dan arahan. scope.form.fields adalah array, nama harta yang terdapat dalam FormController, yang sangat penting untuk menubuhkan ralat pengesahan sisi pelayan. Tujuan registerFormScope adalah untuk menghantar FormController kepada pengawal induk, yang membolehkan borang yang baru dibuat untuk ditetapkan kepada bentuk kanak -kanak parentForm.

apabila maklumat pengesahan berubah

<code class="language-javascript">$scope.registerFormScope = function (form, id) {
  $scope.parentForm['childForm'+id] = form;
};</code>

Apabila borang berubah dan pengguna bersedia untuk mengesahkannya, kaedah saveForm dalam arahan dipanggil. Kaedah ini akan memohon kaedah Pengawal validateChildForm pada gilirannya dan lulus dalam FormController, scope.giftData dan scope.product. Pengawal mengembalikan janji yang akan dihuraikan atau ditolak mengikut peraturan pengesahan lain.

Apabila janji ditolak, pengawal akan mengembalikan medan yang tidak sah. Ini digunakan untuk membatalkan borang (dan parentForm) dan menetapkan kesilapan tahap medan yang lain. Dalam demo kami, kami menggunakan pengesahan pasca mudah di medan amount dan kami tidak mengembalikan punca kegagalan. Penolakan dari validateChildForm boleh menjadi kompleks atau mudah seperti yang diperlukan oleh aplikasi anda.

Apabila janji kembali berjaya, perintah itu perlu menetapkan kesahihan bidang dalam bentuk. Kod ini juga mesti membersihkan sebarang kesilapan pelayan yang dikenalpasti sebelum ini. Ini memastikan bahawa arahan itu tidak memberikan kesilapan kepada pengguna yang salah. Menetapkan semua bidang dengan $setValidity akan dikaitkan dengan parentForm dalam pengawal untuk menetapkan kesahihan mereka, dengan syarat semua subformasi sah.

Tetapkan pandangan kami

Pandangan tidak begitu rumit, dan untuk demonstrasi kami kami mempermudah produk ke medan berikut: Nama dan Amaun. Dalam langkah seterusnya, kami akan meneroka pandangan yang anda perlukan untuk melengkapkan aplikasi ini.

anda boleh mencari gambaran keseluruhan kod paparan di sini (Produk A) dan di sini (Produk B).

Lihat laluan

<code class="language-html"><input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span></code>

Pandangan ini penting kerana ia menubuhkan borang induk, yang akan digunakan untuk membungkus semua bentuk kanak -kanak yang dimuatkan dari Arahan Produk. Menggunakan ng-repeat dalam ng-if memastikan bahawa DOM tidak diisi dengan tidak betul dengan FormController yang tidak digunakan.

View Arahan

<code class="language-javascript">$scope.formsValid = false;</code>

Nota: Pandangan di atas pada susun atur demo telah dipotong di beberapa tempat dan tidak ada kaitan dengan artikel ini.

di atas amountInput menetapkan mod pengesahan yang akan dikuatkuasakan oleh validator Angular. Bidang di atas akan menggunakan arahan ngPattern yang dibina oleh Angular, yang menilai ungkapan, dan jika benar, medan akan dilumpuhkan. ngDisabled

Di bahagian bawah paparan, kami memaparkan semua kesilapan untuk memberikan maklum balas kepada pengguna apabila pengguna mengklik butang "Simpan". Ini akan menetapkan harta

pada subform. $submitted

Ringkasan

Letakkan semua kepingan bersama dan kami berakhir dengan yang berikut: (codepen link atau coretan kod hendaklah dimasukkan di sini)

Anda juga boleh mencari semua kod di GitHub.

Kesimpulan

Pasukan saya banyak belajar ketika membina aplikasi terbaru kami. Memahami hubungan bentuk bapa-anak membolehkan kita memudahkan skrin komen kami. Menggunakan arahan membolehkan kita membangunkan borang yang boleh digunakan dalam sebarang konteks dan menggalakkan kod yang boleh diguna semula yang baik. Arahan ini juga membolehkan kami menguji unit kod untuk memastikan borang kami berfungsi seperti yang diharapkan. Permohonan kami dalam pengeluaran dan telah menyumbang kepada lebih daripada 100,000 pesanan.

Saya harap anda suka membaca artikel ini. Jika anda mempunyai sebarang soalan atau komen, saya suka mendengarnya dalam komen di bawah.

FAQ untuk arahan berasaskan borang di AngularJS

Apakah peranan arahan berasaskan bentuk di AngularJS?

Arahan berasaskan borang dalam AngularJ memainkan peranan penting dalam mengurus dan mengesahkan input pengguna dalam bentuk. Mereka menyediakan cara untuk membuat tag HTML tersuai yang bertindak sebagai widget tersuai baru. Mereka juga boleh memanipulasi DOM dengan cara yang menambah fungsi ke aplikasi kami. Arahan ini amat berguna apabila anda ingin merangkum dan menggunakan semula ciri umum sepanjang aplikasi anda.

Bagaimana untuk membuat arahan berasaskan borang tersuai di AngularJS?

Mewujudkan arahan berasaskan borang tersuai di AngularJS melibatkan menentukan arahan baru menggunakan fungsi .directive. Anda perlu memberikan arahan anda dengan nama dan fungsi kilang yang akan menjana objek pilihan arahan. Objek ini boleh menentukan pelbagai sifat, termasuk restrict, template, scope, link, dan sebagainya. Pilihan restrict digunakan untuk menentukan bagaimana arahan dipanggil dalam HTML.

bagaimana untuk mengesahkan input borang menggunakan arahan AngularJS?

AngularJS menyediakan beberapa arahan terbina dalam untuk pengesahan borang, termasuk ng-required, ng-pattern, ng-minlength, ng-maxlength, dan banyak lagi. Arahan ini menambah pengesahan ke input borang anda, memastikan input pengguna memenuhi kriteria tertentu sebelum borang diserahkan. Anda juga boleh membuat arahan pengesahan tersuai untuk keperluan pengesahan yang lebih kompleks.

Apakah tujuan FormController dalam AngularJS?

FormController Dalam AngularJS menyediakan kaedah untuk menjejaki status borang dan kawalan mereka, memeriksa kesahihan, dan menetapkan semula bentuk. Ia boleh didapati secara automatik dalam Arahan Borang dan boleh disuntik ke dalam pengawal, arahan, atau perkhidmatan lain.

bagaimana menggunakan arahan ng-submit di angularjs?

Arahan

dalam AngularJS membolehkan anda menentukan tingkah laku tersuai apabila menyerahkan borang. Daripada menulis kod JavaScript untuk mengendalikan acara penyerahan borang menggunakan ng-submit. Ini amat berguna apabila menghalang tingkah laku penyerahan borang lalai apabila borang tidak sah. ng-submit

Apakah perbezaan antara bentuk dan bentuk ng dalam angularjs?

Perbezaan utama antara

dan

dalam form dalam ng-form ialah ng-form boleh bersarang dalam bentuk lain. Ini membolehkan anda mengumpulkan input yang berkaitan bersama -sama dan mengesahkannya sebagai subform. Sebaliknya, arahan standard form tidak menyokong bersarang.

Bagaimana untuk menetapkan kesahihan medan borang di AngularJS?

anda boleh menetapkan kesahihan medan borang dalam angularjs menggunakan kaedah ngModelController yang disediakan oleh $setValidity. Kaedah ini menerima dua parameter: kunci pengesahan dan nilai boolean. Jika nilai boolean palsu, kunci ditambah ke objek $error medan.

Bagaimana menggunakan arahan ng-model dalam bentuk AngularJS?

Arahan ng-model di AngularJS mengikat input, pemilihan, kawasan teks, atau kawalan borang tersuai kepada sifat pada skop. Ia menyediakan data dua hala yang mengikat antara model dan pandangan. Ini bermakna bahawa sebarang perubahan pada medan input akan mengemas kini model dan sebaliknya secara automatik.

Apakah peranan arahan NG-perubahan dalam bentuk AngularJS?

Arahan

dalam AngularJS membolehkan anda menentukan tingkah laku tersuai apabila pengguna mengubah input. Arahan ini berguna apabila anda ingin melakukan sesuatu dengan segera selepas pengguna selesai menaip atau membuat pilihan dan bukannya menunggu borang diserahkan. ng-change

Bagaimana untuk membuat arahan pengesahan tersuai di AngularJS?

Mewujudkan arahan pengesahan tersuai di AngularJS melibatkan menentukan arahan baru yang memerlukan

. Dalam fungsi ngModel arahan, anda boleh menggunakan saluran paip link atau ngModelController untuk menambah logik pengesahan tersuai. $validators

Atas ialah kandungan terperinci Cara membuat arahan berasaskan borang di AngularJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!