ควรใช้ FormGroup กับ FormArray เมื่อใด

FormGroup :

FormGroupรวบรวมค่านิยมของเด็กแต่ละ FormControl เป็นหนึ่งวัตถุที่มีชื่อการควบคุมแต่ละเป็นกุญแจสำคัญใน

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

FormArray :

FormArrayมวลรวมค่าของแต่ละ FormControl เด็กเป็นอาร์เรย์

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

ควรใช้เมื่อใด

FormArray เป็นรูปแบบหนึ่งของ FormGroup ความแตกต่างที่สำคัญคือข้อมูลจะถูกทำให้เป็นอนุกรมเป็นอาร์เรย์ (ตรงข้ามกับการทำให้เป็นอนุกรมเป็นวัตถุในกรณีของ FormGroup) สิ่งนี้อาจมีประโยชน์อย่างยิ่งเมื่อคุณไม่รู้ว่าจะมีตัวควบคุมจำนวนเท่าใดในกลุ่มเช่นฟอร์มไดนามิก

ขอฉันพยายามอธิบายด้วยตัวอย่างสั้น ๆ สมมติว่าคุณมีแบบฟอร์มที่ใช้บันทึกคำสั่งซื้อพิซซ่าของลูกค้า และคุณวางปุ่มเพื่อให้พวกเขาเพิ่มและลบคำขอพิเศษใด ๆ นี่คือส่วน html ของคอมโพเนนต์:

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

และนี่คือคลาสส่วนประกอบที่กำหนดและจัดการคำขอพิเศษ:

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 มีความยืดหยุ่นมากกว่า FormGroup ในแง่ที่ง่ายต่อการจัดการ FormControls โดยใช้ "push", "insert" และ "removeAt" มากกว่าการใช้ "addControl", "removeControl", "setValue" ของ FormGroup ให้แน่ใจว่าการควบคุมต่างๆ ติดตามอย่างถูกต้องในลำดับชั้นของแบบฟอร์ม

หวังว่านี่จะช่วยได้

เพื่อที่จะสร้างรูปแบบปฏิกิริยาพ่อแม่FormGroupเป็นต้อง ซึ่งFormGroupอาจมีformControlsลูกformGroupsหรือformArray

FormArrayสามารถมีอาร์เรย์formControlsหรือformGroupตัวมันเองเพิ่มเติมได้

เราควรใช้ formArray เมื่อใด

โปรดอ่านโพสต์ที่สวยงามนี้ซึ่งอธิบายการใช้งานformArray

ตัวอย่างที่น่าสนใจในบล็อกนั้นเกี่ยวกับการเดินทาง formGroup

โครงสร้างของการเดินทางformGroupโดยใช้formControlและformArrayจะมีลักษณะดังนี้:

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

อย่าลืมเล่นกับDEMOนี้และสังเกตการใช้อาร์เรย์สำหรับcitiesและplacesของการเดินทาง

จาก: Anton Moiseev หนังสือ“ Angular Development with typescript, Second Edition” :

เมื่อคุณจำเป็นต้องเขียนโปรแกรมเพิ่ม (หรือลบ) ควบคุมให้เป็นรูปแบบการใช้FormArray มันคล้ายกับFormGroupแต่มีตัวแปรยาว ขณะFormGroupแสดงให้เห็นถึงรูปแบบทั้งหมดหรือส่วนย่อยคงที่ของเขตข้อมูลฟอร์ม , FormArrayมักจะแสดงให้เห็นถึงคอลเลกชันของการควบคุมรูปแบบที่สามารถเจริญเติบโตหรือหด

ตัวอย่างเช่นคุณสามารถใช้FormArrayเพื่ออนุญาตให้ผู้ใช้ป้อนอีเมลได้ตามจำนวนที่ต้องการ

จากเอกสารเชิงมุมคุณจะเห็นว่า

FormArray เป็นอีกทางเลือกหนึ่งของ FormGroup สำหรับจัดการตัวควบคุมที่ไม่มีชื่อจำนวนเท่าใดก็ได้ เช่นเดียวกับอินสแตนซ์กลุ่มแบบฟอร์มคุณสามารถแทรกและลบตัวควบคุมออกจากอินสแตนซ์อาร์เรย์ฟอร์มแบบไดนามิกได้และค่าอินสแตนซ์อาร์เรย์ฟอร์มและสถานะการตรวจสอบจะคำนวณจากตัวควบคุมรอง อย่างไรก็ตามคุณไม่จำเป็นต้องกำหนดคีย์สำหรับแต่ละคอนโทรลตามชื่อดังนั้นนี่จึงเป็นตัวเลือกที่ยอดเยี่ยมหากคุณไม่ทราบจำนวนค่ารองล่วงหน้า

ให้ฉันดูตัวอย่างของพวกเขาและพยายามอธิบายว่าฉันเข้าใจสิ่งนี้อย่างไร คุณสามารถดูแหล่งที่มาได้ที่นี่

ลองนึกภาพแม่มดมีช่องต่อไปนี้

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

ที่นี่เรามีfirstName, lastName, addressและข้อมูลทั้งหมดเข้าด้วยกันเป็นกลุ่มรูปแบบเพื่อให้เราทุกอย่างในห่อaliases groupในขณะเดียวกันaddressก็เหมือนกลุ่มย่อยดังนั้นเราจึงรวมไว้ในอีกกลุ่มหนึ่งgroup(คุณสามารถดูเทมเพลตเพื่อความเข้าใจที่ดีขึ้น)! ทุกการควบคุมรูปแบบที่นี่ hes keyยกเว้นaliasesและหมายความว่าคุณสามารถผลักดันค่าได้มากเท่าที่คุณต้องการเช่นอาร์เรย์ธรรมดาโดยใช้formBuilderวิธีการpushวิธีการเช่น

นี่คือวิธีที่ฉันเข้าใจหวังว่าจะช่วยใครบางคนได้