Kapan menggunakan FormGroup vs. FormArray?

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?

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 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.

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.

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.