أنجولار - اختبار FormArray

لدي PhoneNumbersFormComponent الذي تبدو قوالبه كالتالي :

<div [formGroup]="form">
    <div formArrayName="numbers">
      <input formControlName="countryPrefix">
      <input formControlName="number">
    </div>
</div>

أريد اجتياز الاختبار الافتراضي الذي تم إنشاؤه بواسطة ng g component xxx من angular-cli

كان أول خطأ حصلت عليه:

تعذر العثور على عنصر تحكم بالاسم 'countryPrefix'

الذي حَلَّلته بـ:

  beforeEach(() => {
    fixture = TestBed.createComponent(PhoneNumbersFormComponent);
    component = fixture.componentInstance;
    component.phoneNumbers = [];
    component.form = new FormGroup({
      countryPrefix: new FormControl(),
      number: new FormControl()
    });
    fixture.detectChanges();
  });

الآن الخطأ الأخير المتبقي هو:

لا يمكن العثور على عنصر تحكم بالاسم 'numbers'

ولا فكرة لدي عن كيفية اختبار formArrayName="numbers"

الإجابة رقم 1

جرب شيئًا مثل هذا:

let array: FormGroup[] = [];
array.push(new FormGroup({
      countryPrefix: new FormControl(),
      number: new FormControl()
}));
let formArray = new FormArray(array);
component.form = new FormGroup({
       numbers: formArray // or array not totally sure
})

الإجابة رقم 2

بدلاً من ذلك، يمكنك إنشاء FormArray في المكون الخاص بك وتوفير دالة getter لمصفوفة النموذج.

ngOnInit() { this.formArrayOfPhoneNumbers = this.phoneNumbers.map((phone) => 
    { return new FormGroup({ countryPrefix: [phone.countryPrefix], number: [phone.number] })
}

get numbers: FormArray { return this.formArrayOfPhoneNumbers as FormArray }

لست متأكدًا من الصياغة على الأرجح، لكن النقطة هي أن توجيه formArrayName سيستدعي getter ويمكنك التأكد من أن كائن FormArray قد تم إرجاعه.