angular - FormArray Test Etme

Bir PhoneNumbersFormComponent'im var ve şablonu şöyle görünüyor :

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

Angular-cli'nin ng g component xxx ile oluşturduğu varsayılan testi geçmek istiyorum

Aldığım ilk hata şuydu:

'countryPrefix' adlı kontrol bulunamıyor

Bunu şunla çözdüm:

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

Şimdi kalan son hata şunlardır:

'numbers' adlı denetim bulunamıyor

Ve formArrayName="numbers"'i nasıl test edeceğim hakkında hiçbir fikrim yok

Cevap #1

Böyle bir şey deneyin:

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

Cevap #2

Alternatif olarak, bileşeninizde bir FormArray oluşturabilir ve form dizisi için bir getter sağlayabilirsiniz.

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

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

Sözdiziminde muhtemelen tam olarak doğru değilim, ama mesele şu ki, formArrayName yönergesi getter'ı çağıracak ve bir FormArray nesnesinin döndüğünden emin olabilirsiniz.

İlgili makaleler