Pengenalan kepada Borang dalam Angular: Borang yang didorong oleh template

Borang

adalah penting dalam aplikasi front-end moden, mengendalikan interaksi pengguna setiap hari, dari log masuk dan carian ke tempahan dan senarai tugasan. Walaupun beberapa bentuk adalah mudah, yang lain boleh menjadi kompleks, merangkumi beberapa halaman. Tutorial ini meneroka pendekatan bentuk yang didorong oleh template Angular untuk membina mereka. Tanpa mengira kaedah pilihan anda, perpustakaan bentuk yang mantap harus menyediakan:

mengikat data dua hala:
• menyimpan nilai input yang disegerakkan dengan keadaan komponen.
Bentuk Penjejakan Negeri:
• secara visual menunjukkan kesahan bentuk (mis., Menggunakan sempadan merah untuk kesilapan).
pengendalian ralat:
• jelas memaparkan ralat pengesahan.
Membolehkan/melumpuhkan bersyarat:
• Kawalan Borang Bentuk berdasarkan pengesahan.
Strategi bentuk sudut

Angular menawarkan dua strategi pembinaan bentuk yang kuat: bentuk yang didorong oleh templat dan bentuk yang didorong model (reaktif). Kedua -duanya menggunakan

.

FormsModule Membina borang pendaftaran: Panduan langkah demi langkah

Contoh ini menunjukkan borang pendaftaran mudah menggunakan bentuk yang didorong templat.

Model Pengguna

1. :

   Tentukan kelas (atau antara muka) untuk mewakili data borang: User

   export class User {
       constructor(
           public id: number,
           public email: string,
           public pwd: string,
           public confirmPwd: string,
           public gender: string,
           public terms: boolean
       ) { }
   }

   Persediaan komponen
2. :

   Buat komponen dan susun atur yang diperlukan untuk borang pendaftaran.

3. mengikat dua hala dengan

   : Gunakan ngModel untuk data dua hala yang mengikat antara input bentuk dan objek dalam komponen anda. ngModel User

4. Penyerahan borang:

   mengendalikan penyerahan borang menggunakan acara . (ngSubmit)
5. Logik Komponen:

   Dalam fail typescript komponen anda, mengendalikan penyerahan borang:

   onSubmit({ value, valid }: NgForm) {
       console.log(this.user.email);
       console.log("valid: " + valid);
   }

   Contoh Lengkap:
Contoh yang lengkap dan boleh didapati di GitHub (pautan yang ditinggalkan untuk keringkasan). Contoh ini termasuk gaya menggunakan bootstrap.

6. Kesimpulan

Tutorial ini meliputi bentuk yang didorong oleh template dalam sudut. Walaupun mudah dan mudah digunakan untuk bentuk yang lebih kecil, pendekatan ini boleh menjadi kurang terkawal untuk bentuk kompleks. Tutorial seterusnya akan meneroka bentuk yang didorong oleh model sebagai alternatif yang lebih berskala.

Pos ini menggabungkan sumbangan dari Esther Vaati, pemaju perisian dan penulis untuk Envato Tuts.

Atas ialah kandungan terperinci Pengenalan kepada Borang dalam Angular: Borang yang didorong oleh template. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!