FormGroup ve FormArray ne zaman kullanılır?

Question 1

Bir FormGroup anahtar olarak her bir kontrol adıyla, bir nesnenin her bir alt FormControl değerlerini birleştirir.

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

FormArray :

Bir FormArray bir diziye her alt FormControl değerlerini birleştirir.

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

Biri diğerine ne zaman kullanılmalı?

Question 2

FormArray, FormGroup'un bir varyantıdır. Temel fark, verilerinin bir dizi olarak serileştirilmesidir (FormGroup durumunda bir nesne olarak serileştirilmesinin aksine). Bu, grup içinde dinamik formlar gibi kaç kontrolün bulunacağını bilmediğinizde özellikle yararlı olabilir.

Hızlı bir örnekle açıklamaya çalışayım. Diyelim ki, bir müşterinin Pizza siparişini kaydettiğiniz bir formunuz var. Ayrıca, özel istekleri eklemelerine ve kaldırmalarına izin veren bir düğme yerleştirirsiniz. İşte bileşenin html kısmı:

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

Snippet'i genişlet

ve işte özel istekleri tanımlayan ve işleyen bileşen sınıfı:

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);
}

Snippet'i genişlet

FormArray, FormControl'leri "push", "insert" ve "removeAt" kullanarak manipüle etmenin FormGroup'un "addControl", "removeControl", "setValue" vb. formun hiyerarşisinde düzgün bir şekilde izlenir.

Bu yardımcı olur umarım.

Question 3

Reaktif formlar oluşturmak için ebeveyn FormGroupşarttır. Bu FormGroupayrıca formControls, çocuk formGroupsveyaformArray

FormArrayayrıca bir dizi formControlsveya bir formGroupkendisini içerebilir .

FormArray'i ne zaman kullanmalıyız?

Lütfen kullanımını açıklayan bu güzel yazıyı okuyunformArray

Bu blogdaki ilginç örnek geziler hakkındadır. formGroup

Geziler yapısı formGroupkullanılarak formControlve formArraybenzer görünümde olacaktır:

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),
               })
               )
      }))
})

Bu DEMO ile oynamayı unutmayın ve dizinin bir yolculuk için citiesve placesbir yolculuk için kullanımına dikkat edin .

Question 4

From: Anton Moiseev Kitabı "Typescript ile Angular Development, Second Edition." :

Bir forma programlı olarak denetimler eklemeniz (veya kaldırmanız) gerektiğinde , FormArray'i kullanın . FormGroup'a benzer ancak bir uzunluk değişkenine sahiptir . Oysa FormGroup bir temsil tüm formu veya formun alanlarının sabit alt kümesini , FormArray genellikle temsil büyüyebilir veya küçültmek olabilir form denetimleri koleksiyonu .

Örneğin, kullanıcıların rastgele sayıda e-posta girmesine izin vermek için FormArray kullanabilirsiniz .

Question 5

Açısal belgelerden bunu görebilirsiniz

FormArray, herhangi bir sayıda adlandırılmamış denetimi yönetmek için FormGroup'a bir alternatiftir. Form grubu örneklerinde olduğu gibi, form dizisi örneklerinden denetimleri dinamik olarak ekleyebilir ve kaldırabilirsiniz ve form dizisi örnek değeri ve doğrulama durumu, alt denetimlerinden hesaplanır. Bununla birlikte, her bir denetim için adıyla bir anahtar tanımlamanıza gerek yoktur, bu nedenle önceden alt değerlerin sayısını bilmiyorsanız bu harika bir seçenektir.

Size örneklerini göstereyim ve bunu nasıl anladığımı açıklamaya çalışın. Kaynağı burada görebilirsiniz

Bir form cadısının aşağıdaki alanlara sahip olduğunu hayal edin

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

Burada elimizdeki firstName, lastName, addressve aliasesbiz her şeyi sarmak için birlikte Tüm alan formu grup group. Aynı zamanda addressbir alt grup gibidir, bu yüzden onu başka bir gruba sarıyoruz group(Daha iyi anlamak için şablona bakabilirsiniz)! Buradaki her form kontrolü keyhariçtir aliasesve bu, gibi formBuilderyöntemleri kullanarak basit bir dizi gibi istediğiniz kadar değerleri itebileceğiniz anlamına gelir push.

Ben bunu böyle anlıyorum, umarım birine yardımcı olur.