Kapan menggunakan FormGroup vs. FormArray?


91

FormGroup :

Sebuah FormGroup agregat nilai-nilai masing-masing FormControl anak ke satu objek, dengan masing-masing nama kontrol sebagai kunci.

const form = new FormGroup({
  first: new FormControl('Nancy', Validators.minLength(2)),
  last: new FormControl('Drew')
});

FormArray :

Sebuah FormArray agregat nilai-nilai masing-masing FormControl anak ke dalam sebuah array.

const arr = new FormArray([
  new FormControl('Nancy', Validators.minLength(2)),
  new FormControl('Drew')
]);

Kapan harus digunakan di atas yang lain?

Jawaban:


122

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.


4
bagaimana jika Anda mencoba mengedit formulir? Bagaimana Anda mengulang dan menambahkan kontrol?
ctilley79

1
Bagaimana Anda merefaktor ini menjadi komponen?
Justin

Apakah mungkin untuk menambahkan objek dengan key: value ke dalam larik formulir daripada hanya nilai?
Anthony

Bagaimana kita bisa mengatur nama label formulir? apakah ada opsi untuk disetel saat kontrol formulir diinisialisasi? karena bentuk dinamis kami tidak dapat menetapkan nilainya.
Krishnadas PC

29

Untuk membuat formulir reaktif, orang tua FormGroupadalah suatu keharusan. Ini FormGroupselanjutnya dapat berisi formControls, anak formGroupsatauformArray

FormArrayselanjutnya dapat berisi larik formControlsatau larik formGroupitu sendiri.

Kapan kita harus menggunakan formArray?

Silakan baca posting indah ini yang menjelaskan penggunaanformArray

Contoh menarik di blog itu adalah tentang trip formGroup

Struktur perjalanan formGroupmenggunakan formControldan formArrayakan terlihat seperti ini:

this.tripForm = this.fb.group({
    name: [name, Validators.required],
     cities: new FormArray(
       [0] ---> new FormGroup({
           name: new FormControl('', Validators.required),
               places: new FormArray(
                  [0]--> new FormGroup({
                      name: new FormControl('', Validators.required),
                         }),
                      [1]--> new FormGroup({
                         name: new FormControl('', Validators.required),
                      })
                  )
              }), 
       [1] ---> new FormGroup({
           name: new FormControl('', Validators.required),
           places: new FormArray(
               [0]--> new FormGroup({
                   name: new FormControl('', Validators.required),
               }),
               [1]--> new FormGroup({
                   name: new FormControl('', Validators.required),
               })
               )
      }))
})

Jangan lupa untuk bermain dengan DEMO ini , dan perhatikan penggunaan array untuk citiesdan placesperjalanan.


Penjelasan singkat dan manis.
Kanchan

penjelasan yang luar biasa
Taoufik Jabbari

Kakak yang baik.
jalpa

@scopchanov Ini mungkin tidak memiliki banyak penjelasan dengan teks, tetapi representasi struktur bentuk memberikan beberapa gambaran. Beri tahu saya jika ada sesuatu yang dapat kami tambahkan untuk meningkatkan jawaban :)
Amit Chigadani

Nah, jika seseorang mengatakan "penjelasan", maka saya berharap untuk melihat dengan tepat. Dengan segala hormat saya, jawaban Anda sangat dekat dengan "hanya link jawaban" menurut definisi SO, karena tepat di mana ia sampai pada intinya, yaitu Kapan kita harus menggunakan formArray? , tautan ke entri blog disediakan, tanpa mengutip bagian penting apa pun darinya. Anda memang telah memposting beberapa kode, tetapi sekali lagi tidak ada penjelasan apa pun. Ini akan membuat perbedaan besar, jika Anda mengutip kedua aturan dari posting blog ini.
scopchanov

5

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.


0

Dari dokumentasi sudut Anda bisa melihatnya

FormArray adalah alternatif FormGroup untuk mengelola sejumlah kontrol yang tidak disebutkan namanya. Seperti contoh grup formulir, Anda bisa secara dinamis menyisipkan dan menghapus kontrol dari contoh larik formulir, dan nilai contoh larik formulir dan status validasi dihitung dari kontrol anaknya. Namun, Anda tidak perlu menentukan kunci untuk setiap kontrol berdasarkan nama, jadi ini adalah opsi yang bagus jika Anda tidak mengetahui jumlah nilai anak sebelumnya.

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

  profileForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
    aliases: this.fb.array([
      this.fb.control('')
    ])
  });

Di sini kita memiliki firstName, lastName, addressdan aliasesSemua bidang bersama-sama adalah kelompok bentuk jadi kami membungkus segala sesuatu di group. Pada saat yang sama addressseperti subkelompok jadi kami membungkusnya dengan yang lain group(Anda dapat melihat templat untuk pemahaman yang lebih baik)! Setiap kontrol bentuk di sini keykecuali aliasesdan itu berarti Anda dapat mendorong di dalamnya nilai sebanyak yang Anda inginkan seperti array sederhana menggunakan formBuildermetode seperti push.

Beginilah cara saya memahaminya, semoga dapat membantu seseorang.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.