测试FormArray

Question

我有一个PhoneNumbersFormComponent，它的模板看起来像：

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

我想通过角cli的ng g component xxx创建的默认测试

我得到的第一个错误是：

找不到名为“countryPrefix”的控件

我用的是：

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

现在剩下的最后一个错误是：

找不到名为“数字”的控件

我不知道如何测试formArrayName="numbers"

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

Answer 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对象。