Question

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

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

我觉得我在黑暗中有点笨拙，所以任何帮助都会非常感激。

父组件：

公司profile.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>

子组件

公司轮廓address.component.ts

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

公司profile.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的方式。

   $("div.daterangepicker").click( function(e) {
        e.stopPropagation();
    });

你需要创建一个 FormArray ，但是你将一个对象数组传递给你的formGroup。

*此外，组件名称中也有拼写错误： company-profile.address.componen e t.html

希望这有帮助

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

1 个答案: