测试FormArray

Question

我有一个PhoneNumbersFormComponent，其模板如下：

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

我想传递angular-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();
  });

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

  

找不到名为'numbers'的控件

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

Answer 1

尝试这样的事情：

type="string"

Answer 2

或者，您可以在组件中构建FormArray并为表单数组提供吸气剂。

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