FormArray adalah varian dari FormGroup. Perbedaan utama adalah bahwa datanya diserialkan sebagai array (sebagai lawan serial sebagai objek dalam kasus FormGroup). Ini mungkin berguna terutama ketika Anda tidak tahu berapa banyak kontrol yang akan ada dalam grup, seperti formulir dinamis.
Izinkan saya menjelaskan dengan contoh singkat. Misalnya, Anda memiliki formulir tempat Anda mencatat pesanan pelanggan untuk Pizza. Dan Anda menempatkan tombol untuk memungkinkan mereka menambah dan menghapus permintaan khusus. Berikut adalah bagian html komponen:
<section>
<p>Any special requests?</p>
<ul formArrayName="specialRequests">
<li *ngFor="let item of orderForm.controls.specialRequests.controls; let i = index">
<input type="text" formControlName="{{i}}">
<button type="button" title="Remove Request" (click)="onRemoveSpecialRequest(i)">Remove</button>
</li>
</ul>
<button type="button" (click)="onAddSpecialRequest()">
Add a Request
</button>
</section>
dan berikut adalah kelas komponen yang mendefinisikan dan menangani permintaan khusus:
constructor () {
this.orderForm = new FormGroup({
firstName: new FormControl('Nancy', Validators.minLength(2)),
lastName: new FormControl('Drew'),
specialRequests: new FormArray([
new FormControl(null)
])
});
}
onSubmitForm () {
console.log(this.orderForm.value);
}
onAddSpecialRequest () {
this.orderForm.controls
.specialRequests.push(new FormControl(null));
}
onRemoveSpecialRequest (index) {
this.orderForm.controls['specialRequests'].removeAt(index);
}
FormArray menawarkan lebih banyak fleksibilitas daripada FormGroup dalam arti bahwa lebih mudah untuk memanipulasi FormControls menggunakan "push", "insert" dan "removeAt" daripada menggunakan "addControl", "removeControl", "setValue" dari FormGroup, dll. Metode FormArray memastikan kontrolnya dilacak dengan benar dalam hierarki formulir.
semoga ini membantu.
Untuk membuat formulir reaktif, orang tua
FormGroup
adalah suatu keharusan. IniFormGroup
selanjutnya dapat berisiformControls
, anakformGroups
atauformArray
FormArray
selanjutnya dapat berisi larikformControls
atau larikformGroup
itu sendiri.Kapan kita harus menggunakan formArray?
Silakan baca posting indah ini yang menjelaskan penggunaan
formArray
Contoh menarik di blog itu adalah tentang trip
formGroup
Struktur perjalanan
formGroup
menggunakanformControl
danformArray
akan terlihat seperti ini:Jangan lupa untuk bermain dengan DEMO ini , dan perhatikan penggunaan array untuk
cities
danplaces
perjalanan.sumber
Dari: Buku Anton Moiseev “Angular Development dengan Ketikan, Edisi Kedua.” :
Saat Anda perlu menambahkan (atau menghapus) kontrol secara terprogram ke formulir , gunakan FormArray . Ini mirip dengan FormGroup tetapi memiliki variabel panjang . Sedangkan FormGroup mewakili seluruh formulir atau subset tetap dari bidang formulir , FormArray biasanya mewakili kumpulan kontrol formulir yang bisa tumbuh atau menyusut .
Misalnya, Anda dapat menggunakan FormArray untuk mengizinkan pengguna memasukkan jumlah email yang berubah-ubah.
sumber
Dari dokumentasi sudut Anda bisa melihatnya
Izinkan saya menunjukkan contoh mereka dan mencoba menjelaskan bagaimana saya memahami hal ini. Anda dapat melihat sumbernya di sini
Bayangkan seorang penyihir formulir memiliki bidang berikut
Di sini kita memiliki
firstName
,lastName
,address
danaliases
Semua bidang bersama-sama adalah kelompok bentuk jadi kami membungkus segala sesuatu digroup
. Pada saat yang samaaddress
seperti subkelompok jadi kami membungkusnya dengan yang laingroup
(Anda dapat melihat templat untuk pemahaman yang lebih baik)! Setiap kontrol bentuk di sinikey
kecualialiases
dan itu berarti Anda dapat mendorong di dalamnya nilai sebanyak yang Anda inginkan seperti array sederhana menggunakanformBuilder
metode sepertipush
.Beginilah cara saya memahaminya, semoga dapat membantu seseorang.
sumber