如何以角度（反应形式）从父组件形式迭代数组

Question

正如标题所说，我正在寻找一种使用反应式表单在子组件上动态迭代父组件中的数组（地址）的方法。

现在我没有收到任何错误，但它没有显示任何内容。

我觉得我在黑暗中摸索了一下，所以任何帮助都将不胜感激。

父组件：

公司简介.component.ts

CreateForm(): void {
    console.log('createFrom:');
    this.companyProfileForm = this.fb.group({
      title: ['', Validators.required],
      registrationNumber: null,
      webAddress: '',
      description: '',
      addresses: this.fb.array([this.createAddress()])
    });
  }

  createAddress(): FormGroup {
    return this.fb.group({
      address: '',
      postCode: '',
      city: '',
      countryId: null,
    });
  }

 populateForm(): void {
  console.log('populateForm: Populating form from companyId: ' + this.company.id);
   this.companyProfileForm.reset({
    title: this.company.title,
    registrationNumber: this.company.registrationNumber,
    webAddress: this.company.webAddress,
    description: this.company.description,
    addresses: this.company.addresses
  });
}

company.profile.component.html

<div *ngIf="company" class="row">
        <app-company-profile-address [addresses]="companyProfileForm.controls['addresses']"></app-company-profile-address>
 </div>

子组件

company-profile-address.component.ts

constructor(
@Inject(forwardRef(() => CompanyProfileComponent))
public companyProfileComponent: CompanyProfileComponent,
private companyService: CompanyService,
) {}

公司简介.address.componenet.html

<div [formGroup]="addresses">

<div formArrayName="addresses" *ngFor="let address of companyProfileComponent.companyProfileForm.get('base.addresses'); let i = index;">

  <div [formGroupName]="i">
    <legend>Address</legend>
    <div class="form-group" aria-required="">
      <label for="postalAddress">Postal address</label>
      <input formControlName="address" type="text" id="postalAddress" value="address.address" class="form-control">
    </div>

    <div class="row">
      <div class="col-xs-4">

        <div class="form-group">
          <label for="postCode">Post code</label>
          <input formControlName="postCode" type="text" id="postCode" value="address.postCode" class="form-control">
        </div>

      </div>
      <div class="col-xs-8">

        <div class="form-group">
          <label for="city">City</label>
          <input formControlName="city" type="text" id="city" value="address.city" class="form-control">
        </div>

      </div>
    </div>
  </div>
</div>

Answer 1

尝试更改填充 FormArray 的方式。

populateAddress() {
  const control = <FormArray>this.companyProfileForm.controls['addresses'];

  this.company.addresses.forEach(element => {
    control.push(element);
  })
}

您需要创建一个FormArray ，但是您正在将一组对象传递到您的 formGroup 中。

*此外，您在组件名称中有一个错字： company-profile.address.componen e t.html

希望这可以帮助