Bentuk yang didorong oleh templat sesuai untuk senario mudah, dan keadaan bentuk diproses melalui ngmodel dan arahan; Bentuk responsif sesuai untuk kawalan kompleks, dan model dibina secara manual melalui formcontrol dan formgroup; Pengesahan boleh dilaksanakan melalui peraturan terbina dalam atau fungsi tersuai; Berorientasikan prestasi, pemuatan malas, perkongsian keadaan, komponen abstrak, dan patal yang disyorkan.

Borang pengendalian dalam sudut tidak begitu rumit, tetapi untuk benar -benar menggunakannya dengan baik, anda masih perlu memahami mekanisme kerja dan amalan terbaiknya. Angular menyediakan dua cara utama untuk mengendalikan bentuk: bentuk yang didorong oleh templat dan bentuk responsif. Kaedah yang mana untuk dipilih bergantung pada keperluan dan kerumitan projek anda.

Bentuk yang didorong oleh templat: Sesuai untuk senario mudah

Jika anda hanya perlu berurusan dengan beberapa input pengguna yang mudah, seperti log masuk dan pendaftaran, borang yang didorong oleh templat akan lebih ringan dan lebih mudah untuk dimulakan.

Bentuk ini mengikat data dengan menggunakan ngModel dalam templat, dan secara automatik mengumpul status borang dengan arahan seperti ngForm (seperti yang disentuh, sah, dll.).

 <form #myForm = "ngform" (ngSubmit) = "onsubmit (myForm)">
  <input name = "e -mel" ngmodel diperlukan e -mel />
  <Button Type = "Hantar"> Hantar </butang>
</form>

Berikut adalah beberapa perkara penting yang perlu diperhatikan:

• Anda mesti menambah atribut name kepada setiap input, jika tidak, ia tidak akan dikesan dengan betul.
• Status bentuk boleh diperoleh melalui myForm.form.status
• Peraturan pengesahan dilaksanakan melalui atribut asli HTML5, seperti required dan email

Kaedah ini cepat menulis, tetapi tidak sesuai untuk logik perniagaan yang kompleks atau struktur bentuk dinamik.

Bentuk responsif: Lebih sesuai untuk kawalan kompleks

Apabila anda memerlukan lebih banyak kawalan, seperti medan menambah secara dinamik, pengesahan bersyarat, dan struktur bentuk bersarang, anda harus menggunakan bentuk reaktif .

Intinya adalah untuk membina model bentuk secara manual dalam kelas komponen melalui FormControl , FormGroup , dan FormArray . Kelebihannya ialah ia mempunyai struktur yang jelas dan kesesuaian yang kuat, menjadikannya sesuai untuk aplikasi besar.

 this.myform = formgroup baru ({
  Nama: FormControl Baru ('', Validators.required),
  E -mel: FormArray Baru ([
    FormControl baru ('', validators.email)
  ])
});

Kemudian mengikat kawalan ini dalam templat:

 <input [formControl] = "myForm.get (&#39;nama&#39;)" />
<div formArrayName = "e -mel">
  <input *ngfor = "biarkan e -mel myform.get (&#39;e -mel&#39;). Kawalan; biarkan i = indeks" 
         [formControlName] = "i" />
</div>

Beberapa cadangan praktikal:

• Menggabungkan pelbagai validator menggunakan Validators.compose()
• Gunakan perubahan nilai langganan valueChanges untuk melakukan pengesahan atau hubungan masa nyata
• Untuk sebilangan besar medan pendua, ia boleh dimasukkan ke dalam komponen bebas dan dimasukkan ke dalam FormControl

Kemahiran Pengesahan Borang: Jangan bergantung semata -mata pada maklum balas antara muka

Tidak kira jenis bentuknya, pengesahan adalah pautan utama. Sebagai tambahan kepada peraturan asas terbina dalam seperti yang diperlukan dan e-mel, anda juga boleh menyesuaikan fungsi pengesahan.

Sebagai contoh, tentukan sama ada kedua -dua kata laluan itu konsisten:

 Fungsi MatchPassword (Kawalan: AbstractControl): ValidationErrors | batal {
  const pwd = control.get ('kata laluan')?. Nilai;
  const mengesahkan = control.get ('ConfirmentSword')?. Nilai;
  Kembali PWD === Sahkan? null: {mismatch: true};
}

Kemudian lulus fungsi ini sebagai validator FormGroup .

Di samping itu, ingat untuk memaparkan mesej ralat dalam masa di antara muka, seperti:

 <div *ngif = "myForm.get (&#39;kata laluan&#39;). Disentuh && myForm.get (&#39;kata laluan&#39;). tidak sah">
  Kata laluan tidak boleh kosong </div>

Petua prestasi dan penyelenggaraan

Walaupun bentuk sudut berkuasa, jika digunakan dengan buruk, mereka mungkin melambatkan prestasi atau menyebabkan kekeliruan kod. Berikut adalah beberapa petua yang mudah diabaikan:

• Sekiranya terdapat banyak item bentuk, cuba elakkan memulakan semua bidang sekaligus. Anda secara beransur -ansur boleh membina mereka dengan memuatkan malas.
• Semasa berkongsi status borang di kalangan pelbagai komponen, pertimbangkan untuk menggunakan pengurusan tingkah laku perkhidmatan
• Untuk sebilangan besar struktur bentuk berulang, ia boleh dimasukkan ke dalam komponen umum, menerima kumpulan form atau formcontrol melalui @input
• Cuba gunakan patchValue dan bukannya setValue untuk mengelakkan kesilapan kerana medan yang hilang

Pada dasarnya itu sahaja. Borang adalah senario frekuensi tinggi dalam pembangunan front-end. Angular memberikan sokongan yang baik. Selagi perbezaan dan senario yang terpakai difahami dengan jelas, ia masih mudah digunakan.

Atas ialah kandungan terperinci Cara mengendalikan borang dalam sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!